Changing dropdown menu appearance

Hi,

This may be a little too involved to actually fix, but I thought I would give it a try on the site that I have been lurking on for so much help!

My site right now is ColumbiaCountyEconomicTeam.com. I want to change the dropdown menu's appearance. I would like it to be something more similar to this: http://www.shedco.org. Withouth and space in between the main menu and the dropdowns as well as no arrow. I assume this would be a fix in the PHP and not CSS related. Any help?

Thanks!

 

Hello,

Paste the code given below in Custom CSS section
(Appearance -> Theme Options -> Styling Options -> Custom CSS) of your dashboard.

Code:

#menu li.current-menu-item a, #menu li.current_page_item a, #menu li.current-menu-parent a, #menu li.current_page_parent a, #menu li a.selected, #menu li a:hover{
background:none;
}
#menu .ddsmoothmenu li > ul {
background: white;
border-radius:0px;
border:1px solid black;
top: 49px ! important;
}
#menu .ddsmoothmenu li ul li:hover {
background: grey;
}
#menu .ddsmoothmenu li li a,#menu .ddsmoothmenu li li a:link, #menu .ddsmoothmenu li li a:visited {
background: none;
color: black;
} 

You can change the color in above given code as per your requirement.

 

Thank you very much! Your forum has been a great source of information for me.

 

What would the CSS be to add a line underneath the main item being hovered over? Like the green line that appears under the parent in the example page. Again, many thanks!

 

Bump

Hoping for additional help.

 

Hello,

Paste the code given below in Custom CSS section
(Appearance -> Theme Options -> Styling Options -> Custom CSS) of your dashboard.

Code:

#menu li:hover{
border-style:solid;
border-bottom:thick solid #F1FC53;
opacity:0.85;
height: 44px;
padding-left: 10px;
padding-right: 10px;
}
#menu li{
padding-right: 10px;
}
#menu .ddsmoothmenu li > ul{
margin-left:0px;
}
#menu li.selected:hover{
border-style:solid;
border-bottom:thick solid #F1FC53;
opacity:0.85;
}
#menu li.current_page_item{
border-style:solid;
border-bottom:thick solid #F1FC53;
opacity:0.85;
height: 44px;
padding-left: 10px;
padding-right: 10px;
} 

This will solve your issue.