please take @ css below submenu li keep inheriting stylings mainmenu when gave it own ones!
for example there padding on mainmenu, submenu applies them if gave it own padding won't use them , still uses ones on mainmenu, please help, in advance...
#headermenu{ float: right; } /*main menu*/ #mainmenu li{ padding: 8px 12px 5px 12px; position: relative; list-style: none; float: left; } #mainmenu a{ color: #757575; } #mainmenu a:hover{ color: #7fa0ba; } #mainmenu a.active{ color: #305067; } #mainmenu li a.getstartedbutton{ color: #a3c182; } #mainmenu li a.getstartedbutton:hover{ color: #7fa0ba; } /*submenu*/ ul.submenu{ background-color: #ffffff; border: 1px solid black; position: absolute; top: 49px; -webkit-box-shadow: 0px 4px 15px -5px rgba(0,0,0,0.43); -moz-box-shadow: 0px 4px 15px -5px rgba(0,0,0,0.43); box-shadow: 0px 4px 15px -5px rgba(0,0,0,0.43); } .submenu li{ background-color: orange; width: 95px; padding: 2px 2px 2px 3px; position: relative; text-align: left; list-style: none; } .submenu li a{ background-color: black; } /*tablets & smart phones (must hidden widescreen)*/ .secondheader-button,#secondheader{ display: none; } /*////////////////////////////*/ the html follows:
<header> <div id="wrapperheader"> <div class="scrollable" id="headercontent"> <section class="headerlogo"> <a href="index.html"><img id="logoimage" src="assets/elements/logo.png" alt="loai design studio logo"/></a> </section> <section id="headermenu"> <nav> <ul id="mainmenu"> <li><a class="active" href="index.html">home</a></li> <li><a class="submenu" href="#">portfolio</a> <ul class="submenu"> <li><a href="web-design.html">web design</a></li> <li><a href="visual-identity.html">visual identity</a></li> <li><a href="photography.html">photography</a></li> </ul> </li> <li><a href="testimonials.html">testimonials</a></li> <li><a href="about.html">about me</a></li> <li><a href="contact.html">get in touch</a></li> <li><a class="getstartedbutton" href="get-started.html">get started</a></li> </ul> </nav> </section> </div> </div> </header>
according css specificity rules
#mainmenu li is more specific than
.submenu li and why latter (.submenu li) doesn't override former (#mainmenu li).
try:
#mainmenu .submenu li and read on http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
Comments
Post a Comment