CSS menu hover colors and background colors -
i have css menu:
.menu-product-categories-container { display:block; width:100%; height:60px; background:#f36f25; } #menu-product-categories { list-style: none; padding: 0; margin: 0; text-align:center; height:100%; z-index: 0; } #menu-product-categories > li { display: inline-block; z-index:9999; position:relative; padding:21px 8px; text-decoration:none; } #menu-product-categories li > { display: block; } #menu-product-categories > li:hover { background:#ffffff; color:#f36f25; } #menu-product-categories > li > a:hover { color:inherit; } #menu-product-categories ul.sub-menu { list-style: none; padding: 0; margin: 0; display:none; width:200px; position:absolute; z-index:1; left:0; top:60px; background: #ffffff; } #menu-product-categories li:hover ul.sub-menu { display: block; max-height: 200px; background: #ffffff; } #menu-product-categories ul.sub-menu li { color:#ffffff; padding:5px; } #menu-product-categories ul.sub-menu li:hover { color:#f36f25; background:#000000; float:none; padding:5px; }
how can make item color white?
i tried adding color:#ffffff;
#menu-product-categories li > {
affecting sub menu colors.
i want make items white , sub menu background colour #f35f25
, sub menu items white text , on hover #f36f25 text , white background
just need add child selection >
selector, making #menu-product-categories > li > { color: #ffffff; }
. limits styling affecting first level menu items , not submenus. see https://jsfiddle.net/6dyckmtj/1/
Comments
Post a Comment