Hello all,
I've had some good luck setting up a nested css menu but am confused about one thing. When I hover over the subnavs (slideouts), the parent hover state goes back to non-active. How do I make the parent stay in the hover state while pointing at one of its subnavs? I think a:active has something to do with it but I haven't had much luck.

PS: this menu isn't wired for IE yet so don't worry about all the issue there.

Thanks for any help!
Brian

<div id="left-menu">
<ul>
  <li>
    <ul>
      <li><a href="#" title="Encounter the People">Encounter the People</a>
        <ul>
          
            <li><a href="#" title="Native History &amp; Tradition">Native History &amp; Tradition</a>
                <ul>
                <li><a href="#" title="Navajo">Navajo</a></li>
                <li><a href="#" title="Hopi">Hopi</a></li>   
                </ul>
            </li>
          
            <li><a href="#" title="Artists Directory">Artists Directory</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
<ul>
  <li>
    <ul>
      <li><a href="#" title="Visual Gallery">Visual Gallery</a>
        <ul>
          
            <li><a href="#" title="Photo">Photo</a></li>
            <li><a href="#" title="Video">Video</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
<ul>
  <li>
    <ul>
      <li><a href="#" title="Go Beyond: Travel the Trails">Travel the Trails</a>
        <ul>
          
            <li><a href="#" title="Trail Maps">Trail Maps</a>
                
                <ul>
                    <li><a href="#" title="Interactive Map">Interactive Map</a></li>
                    <li><a href="#" title="Individual Trail Maps &amp; Itineraries">Trail Maps &amp; Itineraries</a></li>
                </ul>
   </li>
            
            <li><a href="#" title="Visitor Information">Visitor Information</a>
                <ul>
                    <li><a href="#" title="Regional Orientation">Regional Orientation</a></li>
                    <li><a href="#" title="Visitor FAQ">Visitor FAQ</a></li>
                </ul>
   </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
<ul>
  <li>
    <ul>
      <li><a href="#" title="News/Events">News/Events</a>
        <ul>
          
            <li><a href="#" title="Events Calendar">Events Calendar</a></li>
            <li><a href="#" title="News Info/Press Releases">News Info/Press Releases</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
<ul>
  <li>
    <ul>
      <li><a href="#" title="About NANACT">About NANACT</a>
        <ul>
        
            <li><a href="#" title="Background &amp; Purpose">Background &amp; Purpose</a></li>
            
            <li><a href="#" title="Call for Artists">Call for Artists</a></li>
          
            <li><a href="#" title="Artist Resources">Learn More</a>
                <ul>
                <li><a href="#" title="What is NANACT?">What is NANACT?</a></li>
                <li><a href="#" title="Who is Involved?">Who is Involved?</a></li>
                <li><a href="#" title="How NANACT Helps">How NANACT Helps</a></li>
                <li><a href="#" title="Why Apply?">Why Apply?</a></li> 
                <li><a href="#" title="How to Apply">How to Apply</a></li>    
                </ul>
            </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
     
</div>
        
        </div>
        <!--Left_Nav ended-->
 

 
#spacer {margin-top: 20px;}
#left-menu {
 width: 261px;
} 
#left-menu ul { /* remove bullets and list indents */
 list-style: none;
 margin: 0;
 padding: 0;
}
/* style, color and size links and headings to suit */
#left-menu a {
 display: block;
 margin: 0;
 font-weight: bold;
 font-family: "Trebuchet MS", Trebuchet, Verdana, Arial, Helvetica, sans-serif;
 color: #FFF0C7;
 text-decoration: none;
 height: 32px;
 padding-left: 30px;
 padding-top: 10px;
}
#left-menu a:hover {
 color: #b24800;
 background-image: url(../images/left_navigation/left_nav_over_state.jpg);
}
#left-menu li {
 /* make the list elements a containing block for the nested lists */
position: relative;
 padding-left: 0px;
 margin-left: 0px;
} 
#left-menu ul ul ul {
 position: absolute;
 top: 0;
 background:#fff1c6;
 border:solid;
 border-width: 2px;
 border-color:#857e5b;
 left: 100%; /* to position them to the right of their containing block */
 width: 100%; /* width is based on the containing block */
 color: #B1A678;
}
#left-menu ul ul ul a{
 background:#fff1c6;
 color: #B1A678;
}
#left-menu ul ul ul a:hover {
 background-image: url(none);
}
div#left-menu ul ul ul,
div#left-menu ul ul li:hover ul ul
{display: none;}
div#left-menu ul ul li:hover ul,
div#left-menu ul ul ul li:hover ul
{display: block;}

After some research it appears that I'm not the only one with this problem. Examples like http://htmldog.com/articles/suckerfi.../vertical.html don't keep the parent items highlighted either. So I'm assuming the solution will lie in javascript or some similar hack.

I did find this:

 
#nav li:hover > a:link,
#nav li:hover > a:visited  {
highlighted properties
}

But this made all of my elements use the same hover bg and it totally blows up in IE6. Aaaargh! I'm trying to get away from 100% js menus but this is proving aggravating, limits creativity and is eating up tons of time.

If anyone knows a way to make the parent elements to display their hover states while navigating sub elements, please let me know.

Brian

If anyone knows a way to make the parent elements to display their hover states while navigating sub elements, please let me know.

You can't, at least not in the way you want. You can, however, add a class to the parent menu that is the same as the rules for the hover state, but that would not keep the parent menu 'hovered' at the same time the sub-menu item is in it's hover state. The only way you're going to get that particular effect is with scripting.

Okay, good to know. Think I'll just come up with a different nav solution since I'm no js person.

Try this one,

http://users.tpg.com.au/j_birch/plug...fish/#examples

It will work as you like,

it is little advanced suckerfish

Best Regards,

Vrajesh

Wow, that's great. Thank you for posting the link, I'll attempt to implement this solution.

It took some sweat but superfish came through. I'll post the website www.nanact.org at the end of this week if anybody cares to see the application of the menu. Thanks again.

Brian