CSS class under # selector -

CSS class under # selector -

i trying apply style specific item of css menu. css menu has a

<div id="cssmenu"> </div>

so of items in .css file #cssmenu li ul { etc. however, want apply style headers of menu, trying add:

<li class="header"><a>menu header</a></li>

when seek add together styles .css using .header class, styles not appear beingness applied. need nesting class css, #cssmenu .header or something?

edit:

here css:

#cssmenu { background-color: #ffffcc; clear: both; display: inline; float: left; list-style: none; overflow: hidden; text-align: center; text-transform: uppercase; width: 100%; } #cssmenu li { display: inline-block; } #cssmenu li { display: inline-block; } #cssmenu li ul { /*margin-top: 0px; submenu location relative bottom of parent */ display: none; } #cssmenu li:hover ul { display: block; position: absolute; } #cssmenu li ul li { width: 200px; } #cssmenu li:hover > { background: #99cc99; /* parent background when hovering on kid */ /* shadow around parent when hover */ box-shadow: 5px 5px 25px #000; -moz-box-shadow: 5px 5px 25px #000; -webkit-box-shadow: 5px 5px 25px #000; /*border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;*/ } #cssmenu li { color: #000; font-weight: bold; text-decoration: none; padding: 12px; } #cssmenu li a:hover { background-color: #99cc99; padding: 12px 12px 11px 12px; /* link background when hover on link */ } #cssmenu li ul { background: rgba(255,255,255,0.9); /* kid menu background w/ transparency */ padding: 10px 5px; box-shadow: 5px 5px 25px #bbb; -moz-box-shadow: 5px 5px 25px #bbb; -webkit-box-shadow: 5px 5px 25px #bbb; border-radius: 0px 15px 15px 15px; -moz-border-radius: 0px 15px 15px 15px; -webkit-border-radius: 0px 5px 5px 5px; } /* display sub-menu list */ #cssmenu li ul li { display: block; text-align: left; } #cssmenu li ul li a, #nav li ul li a:hover { background: transparent; color: #000; width: 180px; font-size: 0.95em; font-weight: normal; } #cssmenu li ul li a:hover { /*text-decoration: underline;*/ box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; } #cssmenu .menuheader { color: #bbb; }

and html:

<div id="cssmenu"> <ul> <li class="menuheader"><a>store</a> <ul> <li><a href="products.htm">essential oil blends</a></li> .... </ul> </li> .....

#cssmenu .header should work.

check illustration created: http://jsfiddle.net/74jqq/2/

here simple reference regarding css selectors:

# used id's while . classes (which know).

a space between selections mean looking @ descendant elements.

a > symbol means looking @ direct children elements.

example:

<div id="cssmenu"> <ul> <li class="header"><a>header1</a></li> <li class="header"><a>header2</a></li> </ul> <a>footer</a> </div>

#cssmenu .header select 2 <li>

.header select 2 <li>

#cssmenu > .header not select since there no element class "header" direct kid of #cssmenu.

#cssmenu a select 3 <a> elements.

#cssmenu > a select lastly <a> element (which reads footer).

css css-selectors