I have this CSS:
#menuBar {
/*width: 960px;*/
height: 35px;
clear: both;
}
ul#nav {
float: left;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
background-color: #0068b4;
}
ul#nav li {
display: inline;
}
ul#nav li a {
float: left;
line-height: 35px;
color: #ffffff;
text-decoration: none;
margin: 0;
padding: 0 30px;
background-color: #0068b4;
}
/* APPLIES THE ACTIVE STATE TO PARENT*/
ul#nav .currentParent a, ul#nav li:hover > a {
color: #ffffff;
text-decoration: none;
background: #005899;
}
/* THE SUBMENU LIST HIDDEN BY DEFAULT */
ul#nav ul {
display: none;
}
/* WHEN THE FIRST LEVEL MENU ITEM IS HOVERED, THE CHILD MENU APPEARS */
ul#nav li:hover > ul {
position: absolute;
display: block;
width: 97%;
height: 35px;
margin: 35px 0 0 0;
background-color: #e0e0e0;
}
ul#nav li:hover > ul li a {
float: left;
line-height: 35px;
color: #000000;
text-decoration: none;
margin: 0;
padding: 0 30px 0 30px;
background-color: #e0e0e0;
}
/* APPLIES THE ACTIVE STATE TO CHILD*/
ul#nav li ul li.currentChild a, ul#nav li:hover > ul li a:hover {
color: #000000;
text-decoration: none;
background-color: #afafaf;
}
And this HTML:
<div id="menuBar">
<ul id="nav">
<li><a href="javascript: void;">Menu 1</a>
<ul>
<li><a href="menu1submenuitem1.html">Menu 1 Submenu item 1</a></li>
<li><a href="menu1submenuitem2.html">Menu 1 Submenu item 2</a></li>
<li><a href="menu1submenuitem3.html">Menu 1 Submenu item 3</a></li>
</ul>
</li>
<li><a href="javascript: void;">Menu 2</a>
<ul>
<li><a href="menu2submenuitem1.html">Menu 2 Submenu item 1</a></li>
<li><a href="menu2submenuitem2.html">Menu 2 Submenu item 2</a></li>
</ul>
</li>
<li class="currentParent"><a href="javascript: void;">Menu 3</a>
<ul>
<li><a href="menu3submenuitem1.html">Menu 3 Submenu item 1</a></li>
<li class="currentChild"><a href="menu3submenuitem2.html">Menu 3 Submenu item 2</a></li>
<li><a href="menu3submenuitem3.html">Menu 3 Submenu item 3</a></li>
</ul>
</li>
</ul>
</div>
I'm using this to display a two level horizontal menu. What I want to achieve is that when an option from the second level is clicked I want the parent and the children itself to remain highlighted. To do this I'm actually building the HTML for the menu in the code behind of my ASP.net page and using the styles: currentParent and currentChild to highlight them. That's working, what I've not been able to figure out is how to make the second level that contains the child that was clicked to stay visible. I've tried by adding display: none in a lot of places, but nothing is working. I'm wondering if somebody can help me with this and give some advise of the modifications I need to add to the CSS to achieve this?
EDIT 1:
I've completed the code and reviewed that it's working (you can see it here: http://jsfiddle.net/cesarvinas/ZQWe7/). You can see in the HTML code that I've applied the class current Parent to parent menu Menu 3 and the class currentChild to submenu item Menu 3 Submenu item 2. With this, the parent and child are now highlighted. What I want in addition is that the row that contains the submenu items (the gray one): Menu 3 Submenu item 1, Menu 3 Submenu item 2, and Menu 3 Submenu item 3 remains visible.
As I explained in the main post, I have added code to the code behind of the ASP .net page to build the HTML up and assign the CSS classes when necessary.
Is there a way to have a CSS class that I can assign to the parent <li> (in the example, the Menu 3 parent) to keep its children visible?
EDIT 2
Thanks to the help I've received here, specially from 3dgoo, this is almost done. I've updated the example here: http://jsfiddle.net/cesarvinas/ZQWe7/5/. However, to make the submenu items that are not current to remain silver (and not blue as in 3dgoo example) I've had to create one more CSS class ".notselected" that I'm applying to those submenu items that are not selected. My question is: is there a way to achieve the same without having to add an extra CSS class? This is what I've done:
ul#nav li ul li.notselected a,
ul#nav li:hover > ul li a {
float: left;
line-height: 35px;
color: #000000;
text-decoration: none;
margin: 0;
padding: 0 30px 0 30px;
background-color: #e0e0e0;
}
and the HTML:
<li class="currentParent"><a href="#">Menu 3</a>
<ul>
<li class="notselected"><a href="#">Menu 3 Submenu item 1</a></li>
<li class="currentChild"><a href="#">Menu 3 Submenu item 2</a></li>
<li class="notselected"><a href="#">Menu 3 Submenu item 3</a></li>
</ul>
</li>
I've tried with this in the CSS:
ul#nav li ul li a,
ul#nav li:hover > ul li a {
float: left;
line-height: 35px;
color: #000000;
text-decoration: none;
margin: 0;
padding: 0 30px 0 30px;
background-color: #e0e0e0;
}
and removing the class="notselected" from the HTML, but it doesn't work. Why is that?
Thanks.
You can do this by using the following css selector ul#nav li.currentParent > ul like so:
CSS
...
ul#nav li.currentParent > ul, // Add this
ul#nav li:hover > ul {
position: absolute;
display: block;
width: 97%;
height: 35px;
margin: 35px 0 0 0;
background-color: #e0e0e0;
}
ul#nav li:hover > ul { // And add these three lines
z-index: 10;
}
...