Making hovor state of hidden list visible when page is active
- by Joel
Hi guys,
One day I hope to not be such a newbie on this stuff, but some of this feels so insurmountable sometimes!
OK. I have a nav bar with hidden li items that are visible when hovered over.
Here's the live site:
http://www.rattletree.com
Here's the code for the nav:
<ul id="navbar">
<li id="iex"><a href="index.php">About Rattletree</a></li>
<li id="upcomgshows"><a href="upcomingshows.php">Calendar</a></li>
<li id="sods"><a href="#">Sights & Sounds</a>
<ul class="innerlist">
<li class="innerlist"><img class="arrowAdjust" src="images/curved_arrow.png" alt="" /></li>
<li class="innerlist"><a href="/playlist.m3u" target="_blank" onclick="javascript:BatmoAudioPop('Rattletree Marimba',this.href,'1'); return false">Listen</a></li>
<li class="innerlist"><a href="/new_pictures.php">Photos</a></li>
<li class="innerlist"><a href="/video.php">Video</a></li>
<li class="innerlist"><a href="/press.php">Press</a></li>
</ul>
</li>
<li id="bookin"><a href="#">Contact</a>
<ul class="innerlist">
<li class="innerlist"><img class="arrowAdjust" src="images/curved_arrow.png" alt="" /></li>
<li class="innerlist"><a href="/booking.php">Booking Info</a></li>
<li class="innerlist"><a href="/media.php">Media Inquiries</a></li>
</ul>
</li>
<li id="ste"> <a href="/sounds.php">Store</a></li>
<li id="instrumes"><a href="/instruments.php">The Instruments</a></li>
<li id="classe"><a href="classes.php">Workshops</a></li>
</ul>
css:
div#navbar2 {
background-color:#546F8B;
border-bottom:1px solid #546F8B;
border-top:1px solid #000000;
display:inline-block;
position:relative;
width:100%;
}
div#navbar2 ul#navbar {
color:#FFFFFF;
font-family:Arial,Helvetica,sans-serif;
font-size:16px;
letter-spacing:1px;
margin:10px 0;
padding:0;
white-space:nowrap;
}
div#navbar2 ul#navbar li ul.innerlist {
color:#000000;
display:none;
position:relative;
z-index:20;
}
div#navbar2 ul#navbar li {
display:inline;
list-style-type:none;
margin:0;
padding:0;
position:relative;
}
Now it's a bit tricky what I want to do:
If a user navigates to one of the innerlist pages, I'd like that innerlist ul to remain visible (with the specific li displaying the hovered state).
Now I think I could figure that out on my own, but you can see on the live page that if the user is on a page from the innerlist and that list was visible, then if they hovered over the other nav tab, then those innerlists would overlap. This is a problem.
Hopefully that last sentence makes sense!
In short:
I need to keep the inner list of the active page displaying, BUT if the user hovers over another nav button WITH it's own inner list, then the live innerlist needs to disappear.
Clear as mud?
