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

Popular posts from this blog

javascript - Thinglink image not visible until browser resize -

firebird - Error "invalid transaction handle (expecting explicit transaction start)" executing script from Delphi -

mongodb - How to keep track of users making Stripe Payments -