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?
