I assumed a site to continue development, but I have a legacy problem, I can not leave the text black when the user hover over a menu option, for example, when hovering over CATEGORIES as Submenu options should be black.
The css looks like this:
#bt-menu, #bt-menu ul { margin: 0; padding: 0; list-style: none; } #bt-menu { width: 1176px; margin: 0px auto; background: #102983; } #bt-menu:before, #bt-menu:after { content: ""; display: table; } #bt-menu:after { clear: both; } #bt-menu { zoom: 1; } #bt-menu li { float: left; position: relative; color: #000; } /* OPÇÕES DO MENU - AQUI QUANDO ALTERO 000 O TEXTO FICA EM PRETO */ #bt-menu a { float: left; padding: 12px 30px; color: #FFF; text-transform: uppercase; font:12px Arial, Helvetica; text-decoration: none; } /* COR DO TEXTO DO MENU */ #bt-menu li:hover > a { background: #FFEC01; color: #000; } *html #bt-menu li a:hover { /* IE6 only */ color: #000; } #bt-menu ul { margin: 20px 0 0 0; _margin: 0; /*IE6 only*/ opacity: 0; visibility: hidden; position: absolute; top: 39px; left: 0; z-index: 9999; background: #FFEC01; } #bt-menu li:hover > ul { opacity: 1; visibility: visible; margin: 0; } #bt-menu ul ul { top: 0; left: 150px; margin: 0 0 0 0px; _margin: 0; /*IE6 only*/ } #bt-menu ul li { float: none; display: block; border: 0; _line-height: 0; /*IE6 only*/ } #bt-menu ul li:last-child { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } #bt-menu ul a { padding: 10px; width: 190px; _height: 10px; /*IE6 only*/ display: block; white-space: nowrap; float: none; text-transform: none; } #bt-menu ul a:hover { background-color: #FFEC01; } #bt-menu ul li:first-child > a:after { content: ''; position: absolute; left: 40px; top: -6px; } #bt-menu ul ul li:first-child a:after { left: -6px; top: 50%; margin-top: -6px; }
An example can be seen here: