Active Link and Hover Link changes to main menu

Hello,

I would like to modify the menu links display of "active links" and "hover Links" in the gk_corporate2 template. My goal is the for "active" and "hover" backgrounds to completely fill up the menu item space. Currently, there is just a small box over the menu item word itself. I want that box to fill up the entire menu item box so that you don't see the original menu background when a link is either active or rolled over.

I've found this line in the menu.css file:
div#gkDropMain > ul > li.active:hover > a { display:block; height:20px; line-height:20px; background:#121c40; -moz-box-shadow:1px 1px 1px #504a42; -webkit-box-shadow:1px 1px 1px #504a42; }

here I can modify the height; however, the positioning is not right and their is still padding on the left and right side.

Could someone point me to where I need to make and/or how I need to go about doing this?

Thanks,
Gary

Hi
Can you give us url to your site ?

Sure, it's:
http://openeye3.com/catdscom/

Try add to override.css

Code: Select all

div.gk-menu > ul.level0 > li.active , div#gkDropMain > ul > li.active , div.gk-menu > ul.level0 > li:hover, div#gkDropMain > ul > li:hover, div.gk-menu > ul.level0 > li.active:hover , div#gkDropMain > ul > li.active:hover  {
    background: none repeat scroll 0 0 #121C40;
    box-shadow: 1px 1px 1px #504A42;
}
div.gk-menu > ul.level0 > li.active > a, div#gkDropMain > ul > li.active > a, div.gk-menu > ul.level0 > li:hover > a, div#gkDropMain > ul > li:hover > a, div.gk-menu > ul.level0 > li.active:hover > a, div#gkDropMain > ul > li.active:hover > a {
    background: none !important;
    box-shadow: none !important;
}


and remember to enableo override.css option in template settings.