Title: CSS Question
Last modified: October 27, 2018

---

# CSS Question

 *  [w4atx](https://wordpress.org/support/users/w4atx/)
 * (@w4atx)
 * [7 years, 7 months ago](https://wordpress.org/support/topic/css-question-42/)
 * I’m using the Twenty-Ten theme and the following “additional CSS”:
 *     ```
       #access {background:#dcdcdc;}
       #access a {color:#000;}
       #access ul li.current_page_item a {color:#ff0000!important;}
       #access li:hover a, #access ul ul:hover a {background:#dcdcdc; color:#000;}
   
       #branding h1, #branding div {display:none;}
       #branding img {border:none;}
       ```
   
 * For current page menu item I get the bright red (ff0000) as long as the menu 
   item has no subitems. If it does have subitems and one is selected, the parent
   menu item goes pale white. If you then hover over that menu you can see that 
   the red color was assigned to the actual selected item. I’m looking to have that
   top item go red along with the selected item.
 * Any help appreciated!
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fcss-question-42%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

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

 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [7 years, 7 months ago](https://wordpress.org/support/topic/css-question-42/#post-10820974)
 * I think this should do it:
    Modify the current rule in Additional CSS as follows`#
   access li:hover a, #access ul ul:hover a {background:#dcdcdc; color:#f00;}`
 * If that doesn’t do it, please post a link to your site. Seeing the live site 
   is the best way to determine which rules work.
 * This rule will cause any items hovered over to be red, whether under the current
   page menu item or not.
 *  Thread Starter [w4atx](https://wordpress.org/support/users/w4atx/)
 * (@w4atx)
 * [7 years, 7 months ago](https://wordpress.org/support/topic/css-question-42/#post-10821434)
 * Thanks for the reply…but not quite what I’m after. As you said, that makes everything
   hovered over red…even menus that have many subitems (which looks strange). I’m
   looking for red *only* after an item has been selected so that the user has a
   visual as to which menu they are under.
 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [7 years, 7 months ago](https://wordpress.org/support/topic/css-question-42/#post-10822142)
 * So the top level item gets colored, as does the current hover item, but nothing
   in between? I don’t see how that can be done with CSS alone. CSS styles are applied
   downwards, you can’t jump back up and apply something different to a grandparent
   element. To achieve the desired effect would require JavaScript to identify the
   proper grandparent element and alter its CSS during the hover.
 *  Thread Starter [w4atx](https://wordpress.org/support/users/w4atx/)
 * (@w4atx)
 * [7 years, 7 months ago](https://wordpress.org/support/topic/css-question-42/#post-10822695)
 * OK…thanks! I’m wondering though, is there a piece of that code (or an additional
   piece) that controls that pale white color of the parent item when you select
   a child? That color looks really washed out.
 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [7 years, 7 months ago](https://wordpress.org/support/topic/css-question-42/#post-10824305)
 * The responsible rule starts at line 545 of theme style.css:
 *     ```
       #access ul li.current_page_item > a,
        #access ul li.current_page_ancestor > a,
        #access ul li.current-menu-ancestor > a,
        #access ul li.current-menu-item > a,
        #access ul li.current-menu-parent > a {
           color: #fff;
       }
       ```
   
 * The specific selector being used is `#access ul li.current-menu-parent > a`
 * This may seem at odds with what I previously said about rules applied downwards.
   This only works for current page items that have specific class values. Applying
   rules to random elements on hover is a different thing entirely.
 * Since you are modifying theme CSS, you’d be well served to learn to use your 
   browser’s CSS inspector tool.(generally under developer tools) You can select
   any element on a page and it’ll show you what CSS is applied. It’ll also show
   you which elements on a page belong to certain HTML elements in page source code.
   Best of all, you can experiment with various CSS rules to find out what works
   before committing them to the site’s saved CSS. I’m more than happy to help you
   with this sort of thing, but I think you’ll be happier if you could help yourself
   🙂
    -  This reply was modified 7 years, 7 months ago by [bcworkz](https://wordpress.org/support/users/bcworkz/).
      Reason: LFs in code
 *  Thread Starter [w4atx](https://wordpress.org/support/users/w4atx/)
 * (@w4atx)
 * [7 years, 7 months ago](https://wordpress.org/support/topic/css-question-42/#post-10824695)
 * Many thanks for your help! I was able to edit the style.css and get exactly what
   I was looking for! I will have to do some more research into the CSS Inspector
   bit…thanks for that tip.

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

The topic ‘CSS Question’ is closed to new replies.

## Tags

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

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 6 replies
 * 2 participants
 * Last reply from: [w4atx](https://wordpress.org/support/users/w4atx/)
 * Last activity: [7 years, 7 months ago](https://wordpress.org/support/topic/css-question-42/#post-10824695)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics