Title: CSS Inheritance issues, please help.
Last modified: August 22, 2016

---

# CSS Inheritance issues, please help.

 *  Resolved [kiasta](https://wordpress.org/support/users/kiasta/)
 * (@kiasta)
 * [11 years, 9 months ago](https://wordpress.org/support/topic/css-inheritance-issues-please-help/)
 * This may be an elementary question, but I am just learning so please bear with
   me.
 * I am having some issues with my navigation bar. When I click on one of the items
   that have child items the text color of the item selected inherits to the child
   menu items. How would I go about preventing this inheritance? What is supposed
   to happen is the parent item, when clicked should just have a black font and 
   the child items have a gray font. But what happens instead is when I click the
   parent all the child items have a black font. Everything else works as it should
   except for that problem.
 * To get a better idea of the problem go to my website and click on Level 1 in 
   the menu bar. Then hover over it, there will be Level 2 which in itself has a
   child menu, Level 2B and Level 2C. Notice that when Level 1 is selected all the
   child items have a black font instead of gray. Click on anywhere else including
   the child menu items and they work as they should. Even clicking on just Level
   2, you get Level 3, Level 3B and Level 3C. Clicking on Level 2 will make all 
   Level 3 child items’ font black. Very annoying and I’m not too sure how to fix
   this issue.
 * Here is the code in question:
 *     ```
       .navigation-menu {
           position: relative;
           float: left;
           padding: 0;
           font-family: 'Lato', sans-serif;
           text-transform: uppercase;
           margin: 0 0 0 10%;
           text-align: center;
       }
       .main-navigation {
           position: relative;
           float: left;
           clear: both;
           display: block;
           float: left;
           width: 100%;
           background: #fff;
           background: hsla( 0, 0%, 100%, 1 );
       }
   
       .main-navigation ul {
           list-style: none;
           margin: 0;
           padding-left: 0;
       }
   
       .main-navigation li {
           float: left;
           position: relative;
       }
   
       .main-navigation a {
           display: block;
           padding: 1em 1em;
           font-size: 14px;
           font-size: 1.4rem;
           text-decoration: none;
           line-height: 1em;
           color: #aaa;
           color: hsla( 0, 0%, 67%, 1 );
       }
   
       .main-navigation ul ul {
           position: absolute;
           left: 0;
           z-index: 99999;
           display: none;
           float: left;
           padding: 0;
           color: #aaa;
           color: hsla( 0, 0%, 67%, 1 );
           background: #fff;
           background: hsla( 0, 0%, 100%, 1 );
           z-index: 99999;
       }
   
       .main-navigation ul ul ul {
           left: 100%;
           top: 0;
       }
   
       .main-navigation ul ul a {
           width: 200px;
       }
   
       .main-navigation ul ul li {
       }
   
       .main-navigation li:hover > a {
           color: #000;
           color: hsla( 0, 0%, 0%, 1 );
       }
   
       .main-navigation ul ul :hover > a {
           color: #000;
           color: hsla( 0, 0%, 0%, 1 );
       }
   
       .main-navigation ul ul a:hover {
           color: #000;
           color: hsla( 0, 0%, 0%, 1 );
       }
   
       .main-navigation ul li:hover > ul {
           display: block;
       }
   
       .main-navigation ul ul li:hover > ul {
           left: 100%;
       }
   
       .main-navigation .current_page_item a,
       .main-navigation .current-menu-item a
       .main-navigation .current-page-item a:hover,
       .main-navigation .current-menu-item a:hover {
           color: #000;
           color: hsla( 0, 0%, 0%, 1 );
       }
   
       .main-navigation .current_page_ancestor {
           background: #ddd;
           background: hsla( 0, 0%, 87%, 1 );
       }
   
       .main-navigation ul ul .current_page_parent,
       .main-navigation .current_page_parent .current_page_item > a {
           background: #ddd;
           background: hsla( 0, 0%, 87%, 1 );
       }
       ```
   
 * And the link to the website in question: [website](http://kiasta.godlessgamer.com)
 * *Edit*
    I’m using a sub-domain of a friend, please don’t take the domain name
   personal as it does not reflect me, it’s just for free usage until I get my own
   hosting. Thanks.

Viewing 2 replies - 1 through 2 (of 2 total)

 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [11 years, 9 months ago](https://wordpress.org/support/topic/css-inheritance-issues-please-help/#post-5204085)
 * Use the greater than symbol to target a direct descendant of your menu (a parent
   item) [http://css-tricks.com/child-and-sibling-selectors/](http://css-tricks.com/child-and-sibling-selectors/)
 *  Thread Starter [kiasta](https://wordpress.org/support/users/kiasta/)
 * (@kiasta)
 * [11 years, 9 months ago](https://wordpress.org/support/topic/css-inheritance-issues-please-help/#post-5204094)
 * Man, thank you so much. I knew about the targeting but I didn’t know if that 
   was the problem nor where the problem was. I figured it out though:
 * I changed this:
 *     ```
       .main-navigation .current_page_item a,
       .main-navigation .current-menu-item a,
       .main-navigation .current-page-item a:hover,
       .main-navigation .current-menu-item a:hover {
           color: #000;
           color: hsla( 0, 0%, 0%, 1 );
       }
       ```
   
 * to this:
 *     ```
       .main-navigation .current_page_item > a,
       .main-navigation .current-menu-item > a,
       .main-navigation .current-page-item a:hover,
       .main-navigation .current-menu-item a:hover {
           color: #000;
           color: hsla( 0, 0%, 0%, 1 );
       }
       ```
   
 * Thanks a ton for that link 🙂

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘CSS Inheritance issues, please help.’ is closed to new replies.

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [html](https://wordpress.org/support/topic-tag/html/)
 * [inheritance](https://wordpress.org/support/topic-tag/inheritance/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 2 replies
 * 2 participants
 * Last reply from: [kiasta](https://wordpress.org/support/users/kiasta/)
 * Last activity: [11 years, 9 months ago](https://wordpress.org/support/topic/css-inheritance-issues-please-help/#post-5204094)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics