Jagg2637I 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.
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.
#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;
}
aprylemagistro