Title: Submenu styling
Last modified: August 19, 2016

---

# Submenu styling

 *  [Jagg2637](https://wordpress.org/support/users/jagg2637/)
 * (@jagg2637)
 * [15 years, 2 months ago](https://wordpress.org/support/topic/submenu-styling/)
 * I am trying to get hovers to work properly on a navigation bar. The tricky part
   is that the “normal” navigation works fine (try the solutions drop down), but
   the “about” drop down with the left rounded corner I setup does not keep its 
   rollover bg while hovering over its submenu.
 * [http://providential.com/dev/](http://providential.com/dev/)
 * The REALLY crazy thing is that the code is identical as far as I can see, but
   it is rendering differently. I added in green text to highlight the issue as 
   well. Again, my issue is that the “about” menu item is not keeping its rollover/
   hover bg.
 * There is a lot of CSS behind this menu, but I will post what I _think_ is relevant.
 * Full CSS as of this posting is available [here](http://mitchelburton.com/stuff/style.css).
 *     ```
       #menu-main-navigation  li a {
           background-image: url('images/nav-bg.jpg');
           background-repeat: repeat-x;
           background-position: right;
           padding: 0px 8px;
           border-left: solid 1px #CCC;
           display: block;
           text-decoration: none;
           font-size: 15px;
           color: #000;
           line-height: 30px;
           height:30px;
           width:120px;
       }
       #menu-main-navigation #menu-item-17 a{
       	background-image: url('images/nav-bg-right.jpg');
       	width:121px;
       }
       #menu-main-navigation #menu-item-20 a{
       	background-image: url('images/nav-bg-left.jpg');
       	width:121px;
       	border:0px;
       	display: block;
       }
       #menu-main-navigation li a:hover {
       	background-image: url('images/nav-bg-hover.jpg');
       }
       #menu-main-navigation #menu-item-17 a:hover{
       	background-image: url('images/nav-bg-right-hover.jpg');
       	width:121px;
       }
       #menu-main-navigation #menu-item-20 a:hover{
       	background-image: url('images/nav-bg-left-hover.jpg');
       	width:121px;
       	border:0px;
       	display: block;
       }
       ----- SKIPPING A BUNCH OF LINES HERE -----
       #access li:hover > a{
       	background-image: url('images/nav-bg-hover.jpg') ; /*need this to work on left */
       	color: #0f0;/*interesting*/
       }
       /*change*/
       #menu-main-navigation #menu-item-20 li:hover > a{
       	background-image: url('images/nav-bg-left-hover.jpg');
       	color: #0f0;/*interesting*/
       	display: block;
       }
       ```
   

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

 *  [aprylemagistro](https://wordpress.org/support/users/aprylemagistro/)
 * (@aprylemagistro)
 * [15 years, 2 months ago](https://wordpress.org/support/topic/submenu-styling/#post-1983028)
 * Have you tried removing the special cases to see if it works if you make it act
   exactly as Solutions?
 *  Thread Starter [Jagg2637](https://wordpress.org/support/users/jagg2637/)
 * (@jagg2637)
 * [15 years, 2 months ago](https://wordpress.org/support/topic/submenu-styling/#post-1983144)
 * > Have you tried removing the special cases to see if it works if you make it
   > act exactly as Solutions
 * What do you mean by the special cases? If you are talking about the !important
   that I put in the CSS, that was necessary to get the proper styles since the 
   submenus seemed to always inherit the parents styles.
 * I think I am actually going to scrap the whole nav and start over for now. If
   I can’t get it working how I want I will just drop the rounded corners idea and
   go for a straight nav bar.

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

The topic ‘Submenu styling’ is closed to new replies.

## Tags

 * [background](https://wordpress.org/support/topic-tag/background/)
 * [css](https://wordpress.org/support/topic-tag/css/)
 * [embedded](https://wordpress.org/support/topic-tag/embedded/)
 * [hover](https://wordpress.org/support/topic-tag/hover/)
 * [image](https://wordpress.org/support/topic-tag/image/)
 * [li](https://wordpress.org/support/topic-tag/li/)
 * [menu](https://wordpress.org/support/topic-tag/menu/)
 * [nav](https://wordpress.org/support/topic-tag/nav/)
 * [navigation](https://wordpress.org/support/topic-tag/navigation/)
 * [Roll](https://wordpress.org/support/topic-tag/roll/)
 * [rollover](https://wordpress.org/support/topic-tag/rollover/)
 * [ul](https://wordpress.org/support/topic-tag/ul/)

 * 2 replies
 * 2 participants
 * Last reply from: [Jagg2637](https://wordpress.org/support/users/jagg2637/)
 * Last activity: [15 years, 2 months ago](https://wordpress.org/support/topic/submenu-styling/#post-1983144)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics