help with menu styling

xtreme-traction.com/EDGE/

i was able to add a background color to the active menu item; but, would like this effect from another website: www.mesquitemarshals.com

what css should i be adding?

trey

Hi Trey,
Thanks for contacting us and choosing our product!
I don't understand your problem. Please description in more detail. thanks.

take a look at the 2nd site and how the menu color changes on hover and when the item is chosen---i want that same effect on the 1st site... i cant figure that out...

thanks
trey

i added this and the hover works fine but the child menu items arent showing the background...i added this styling from an earlier version of the menu that i had installed on another website...

the one on the EDGE site is most current menu...

#js-mainnav.megamenu.blackwhite ul.level0 li:hover,
#js-mainnav.megamenu.blackwhite ul.level0 li.active,
#js-mainnav.megamenu.blackwhite ul.level0 li.over,
#js-mainnav.megamenu.blackwhite ul.level0 li.haschild-over {
background-color: #00316B;
background: -webkit-gradient(linear, left top, left bottom, from(#0049A4), to(#00316B));
background: -webkit-linear-gradient(top, #0049A4, #00316B);
background: -moz-linear-gradient(top, #0049A4, #00316B);
background: -ms-linear-gradient(top,#0049A4, #00316B);
background: -o-linear-gradient(top, #0049A4,#00316B);
-webkit-box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.1);
-moz-box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.1);
box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.1);
}

#js-mainnav.megamenu.blackwhite ul.level0 li.mega:hover > span.mega,
#js-mainnav.megamenu.blackwhite ul.level0 li.mega:hover > a.mega,
#js-mainnav.megamenu.blackwhite ul.level0 li.mega span.mega.over,
#js-mainnav.megamenu.blackwhite ul.level0 li.mega a.mega.active,
#js-mainnav.megamenu.blackwhite ul.level0 li.mega a.mega.over {
color: #FFFFFF !important;
border-bottom-color: transparent !important;
}

Hi Trey,
I see you added the above code is correct. When hover on the top menu will change color
#js-mainnav.megamenu.blackwhite ul.level0 li:hover,
#js-mainnav.megamenu.blackwhite ul.level0 li.active,
#js-mainnav.megamenu.blackwhite ul.level0 li.over,
#js-mainnav.megamenu.blackwhite ul.level0 li.haschild-over {
background-color: #00316B;
background: -webkit-gradient(linear, left top, left bottom, from(#0049A4), to(#00316B));
background: -webkit-linear-gradient(top, #0049A4, #00316B);
background: -moz-linear-gradient(top, #0049A4, #00316B);
background: -ms-linear-gradient(top,#0049A4, #00316B);
background: -o-linear-gradient(top, #0049A4,#00316B);
-webkit-box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.1);
-moz-box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.1);
box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.1);
}
Your problem has been resolved, if there any problems, please take pictures back problem, Thanks

your missing what im asking here....yes the menu changes color on the hover but what about the background on the drop down menu items...

that's what im trying to do style like on the other site: www.mesquitemarshals.com

i figured it out by editting the style.css file on line 645

#megamenucss #js-mainnav .js-megamenu .dropdown-menu{
position: static;
display: block;
position: initial;
padding: 0px;
margin: 0px;
border-width:0px;
border-radius: 0px;
-webkit-box-shadow: 0px;
box-shadow: none;
-webkit-box-shadow: none;

/*styled the drop down menu*/
background-color: #00316B!important;
font-size:13px!important;
text-transform:capitalize!important;
font-weight:bold!important;
}

thanks nt... love the mods...

trey

Hi
Sorry for the late reply. I had a vacation day.
Not I do not want to help you. I'm not understand your problem. you want to add something. You can take pictures so you need more. I will try to help you.
Thanks!