Hi,
I am trying to make a menu that works like the one on this flash site:
http://elevensix.de/
When I click "portfolio", only then to the subnavigation links reveal themselves. Right now I have only managed to get a typical vertical "reveal subnavigation on hover menu" working.
What is required is that once the appropriate menu item it cicked, its submenu
shows. This submenu remains revealed as the submenu items are hovered over then selected. When the submenu item is selected, the content
shows, and both the menu and submenu remain visible (the selected menu and submenu item are given a distinct colour to show the navigation path). Whew.
Here is my html:
<div id="nav">
<ul>
<li><a href="#">about</a></li>
<li><a href="#">testimonials</a>
<ul>
<li><a href="#">testimonial1</a></li>
<li><a href="#">testimonial2</a></li>
<li><a href="#">testimonial3</a></li>
<li><a href="#">testimonial4</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">services1</a></li>
<li><a href="#">services2</a></li>
<li><a href="#">services3</a></li>
<li><a href="#">services4</a></li>
</ul>
</li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!--end #nav-->
and here is my css:
#nav {
width:160px;
position: relative;
top: 250px;
left: 20px;
}
#nav ul {
margin:0px;
padding:0px;
}
#nav ul li {
line-height:24px;
list-style:none;
}
#nav a {
text-decoration: none;
color: #9d9fa2;
}
#nav ul li a:hover {
position:relative;
color: #00aeef;
}
#nav ul ul {
display:none;
position:absolute;
left:160px;
top:4px;
}
#nav ul li:hover ul {
display:block;
color: #00aeef;
}
#nav ul ul li {
width:160px;
float:left;
display:inline;
line-height:16px;
}
.selected {
color: #00aeef !important;
}
Should I be giving the submenus a class so that I can hide then show them? And where would the class be applied? To the ul? could I use the same class for both submenus? Am I wrong in how I am applying the display:none values for this purpose?
Many thanks to all the clever people on here.
