How to format CSS of a dropdown menu so if the 'parent' dropdown is current then the children will not take the formatting of the parent


Tags: html,css,html5,css3

Problem :

How can I stop the children of a dropdown inheriting the parent/titles formatting when the 'active/current' page. For example below. The menu item will highlight green when it is the current active page. 'The about us' is an individual page as well as being the parent dropdown for 'what we do etc'.

Looking through my css, if I keep the .active pseudoclass as it is currently, when 'about us' is given the class 'active' the 'about us' is highlighted but so are the dropdown items of it. This then changes positioning and stuffs up the menu.

To fix this do I need to make more classes/ids and be more specific in the formatting or is there a quicker and more logical way of just highlighting the parent only.

Working Example:

a) Home as 'active': http://jsfiddle.net/homer5677/r4XeS/

b) About us as 'active': http://jsfiddle.net/homer5677/KKuf3/

Code:

Home HTML

<div id='cssmenu'>
  <ul>
    <li class='active'><a href='index 2.html'><span>Home</span></a></li>
    <li class='has-sub'><a href='aboutus.html'><span>About Us</span></a>
       <ul>
          <li><a href='ourhistory.html'><span>Our History</span></a></li>
          <li><a href='whychooseus.html'><span>Why Choose Us</span></a></li>
          <li class='last'><a href='testimonials.html'><span>Testimonials</span></a></li>
      </ul>
   </li>`
  </ul>
</div>`

About Us HTML

<div id='cssmenu'>
  <ul>
    <li ><a href='index 2.html'><span>Home</span></a></li>
    <li class='has-sub, active'><a href='aboutus.html'><span>About Us</span></a>
      <ul>
        <li><a href='ourhistory.html'><span>Our History</span></a></li>
        <li><a href='whychooseus.html'><span>Why Choose Us</span></a></li>
        <li class='last'><a href='testimonials.html'><span>Testimonials</span></a></li>
     </ul>
   </li> 
 </ul>
</div>

CSS

 #cssmenu {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, Sans-Serif;
  font-size: 18px;
  line-height: 15px;
  text-transform: uppercase;
  text-align: left;
   margin-left: 0%; /*to get over 10%*-fixed now*/


 }

#cssmenu > ul {
  width: auto;
  list-style-type: none;
  padding-left: 10%;
  margin-left: 0;
  background: #222222;
 border-bottom: 5px solid #6ec919;
 /*fix border whole way*/
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -o-border-radius: 2px;
  border-radius: 2px;

 }

#cssmenu > ul li#responsive-tab {
  display: none;
  /* Hide for large screens */

}

#cssmenu > ul li {
 display: inline-block;
 *display: inline;
  zoom: 1;
 margin-right: 0px;/**/
 margin-left: -5px;/* get rid of tiny space between items*/
 padding-left: 0px;/**/
}

#cssmenu > ul li.right {
 float: right;
}

#cssmenu > ul li.has-sub {
 position: relative;

}
#cssmenu > ul li.has-sub:hover ul {
 display: block;
 }

#cssmenu > ul li.has-sub ul {
 display: none;
 width: 250px;
 position: absolute;
 margin: 0px;
 padding: 0px;
 list-style-type: none;
 background: #222222;
 /*border: 1px solid #6ec919;
  /* fix for best---border-left: 2px solid #6ec919; */
  border-bottom: 5px solid #6ec919; /* or 5 to match above*/
  border-top: 0 none;
  font-size: 14px;
 }
 #cssmenu > ul li.has-sub ul li {
  display: block;
  }


 #cssmenu > ul li.quote a {

  color: #6ec919;
 }

 #cssmenu > ul li.has-sub > a {
  background-image: url('images/caret.png');
  background-repeat: no-repeat;
  background-position: 90% -95%;
  }

 #cssmenu > ul li.has-sub > a.active,
 #cssmenu > ul li.has-sub > a:hover {
  background: #6ec919 url('images/caret.png') no-repeat;
  background-position: 90% 195%;
  }

 #cssmenu > ul li a {
  display: block;
  padding: 12px 24px 11px 24px;
  text-decoration: none;
 color: #ffffff;

 }



 /*active on hover below */
#cssmenu > ul li.active{
 background: #6ec919;
 color: #fff;
}

 #cssmenu > ul li.active a:hover{

  color: #000;
 }
 /*above*/


 #cssmenu > ul li a:hover {
  background: #6ec919;
  color: #fff;
 }


Solution :

Then do this,

then put same changes on #cssmenu > ul > li:hover

and remove #cssmenu > ul li a:hover part. Which will give effect like below link,

http://jsfiddle.net/r4XeS/3/


    CSS Howto..

    How to hide DIV when scroll reach at Bottom through CSS?

    User agent, how to have diferent css files for diferent devices automaticly

    How can I transform dots to line between CSS menu items?

    How to make irregularly-shaped SVGs overlap while maintaining all areas clickable?

    How to change the icon of a JStree node using only css?

    How to use jquery to cycle elements bg color on click, and reset upon another element's click

    How can I hide the backface of a block element rotated with transform: rotateX()?

    How to do drop-down box like “More action” in gmail

    How can I fix left menu in bootstrap 3.0? [closed]

    How do you apply diferent colors from diferent css rules to the same object?

    How to open html document within

    How to move up an inner box and keep outer box in place with CSS?

    How to display css multiple columns with dynamic height

    How to make a radio looks like disabled but don't specify disabled=“disabled”, just using css and js

    How to make emails responsive?

    How to automatically get element height and use that height in overlay effect

    How to get a floating-DIV to fill available space within its parent DIV?

    How not to display / filter out special characters? (CSS or Javascript)

    CSS How to get rid of border that appears around custom button on and after click

    How to make divs re-arrange when another div is positioned between existing?

    How to adopt drop down menu for mobile devices? [closed]

    jQuery/HTML Select: Show more text in selected option when select is closed

    Article container expands to show all content in standard mode, works fine in quirks mode. Only part wrong

    How do you make a sticky nav bar change colour when you scroll to a desired div?

    How to freeze frame with css

    How to align images to the bottom with css?

    How to make hidden div slide down without affecting other elements in same row

    CSS: How to create special shape

    How to have 2+ boxes slide down

    How to define different css based on element changing number