On second thought, I just noticed the advantage of keeping it the way it is. Ie: the first first list item retains it's hover state when you go deeper into the submenu.
Hmm, I guess it can stay this way.
Here's my CSS if anyone wants to have a go:
Code:
div#nav-cat ul {
list-style: none;
margin:0;
padding:0;
}
div#nav-cat ul.level2, div#nav-cat ul.level3, div#nav-cat ul.level4 {
background-color: #def;
width: 13em;
}
div#nav-cat li {
position: relative;
}
div#nav-cat li:hover {
background-color: #fff;
}
div#nav-cat li a, div#nav-cat li a:visited {
display: block;
padding: .2em;
text-decoration: none;
border-bottom: 1px solid #9cf;
}
div#nav-cat li.submenu {
background-image: url(../images/arrow_blue01.gif);
background-repeat: no-repeat;
background-position: 98% 50%;
}
div#nav-cat li li.submenu:hover {
background-position: 100% 50%;
}
div#nav-cat ul ul {
position: absolute;
top: 0;
left: 13em;
display: none;
border-right: 1px solid #9cf;
border-left: 1px solid #9cf;
border-top: 1px solid #9cf;
margin: -1px 0 0 0;
}
div#nav-cat ul.level1 li.submenu:hover ul.level2,
div#nav-cat ul.level2 li.submenu:hover ul.level3,
div#nav-cat ul.level3 li.submenu:hover ul.level4,
div#nav-cat ul.level4 li.submenu:hover ul.level5,
div#nav-cat ul.level5 li.submenu:hover ul.level6 {display:block;}#centerContent #mainContent {
padding: 0 .5em;
}
You'll need to change the name of the background image for your own image.
Bookmarks