Adding subsubmenu to a horizontal menu - html

Question

I am using a horizontal menu from cssmenumaker.com which features subitems. I've been trying, but I just don't manage to add subsub-items.
This is the CSS I'm using:
.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
}
#menu {
position:absolute;
left:250px;
top:0px;
width:750px;
height:35px;
border:0px solid #123456;
}
.menu ul{
background:#000000;
height:35px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#000000 url("images/seperator.gif") bottom right no-repeat;
color:#cccccc;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover,
.menu ul li:hover a{
background: #2580a2 url("images/hover.gif") bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
.menu li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:125px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
background:url('images/sub_sep.gif') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:125px;
}
.menu li:hover li a{
background:none;
}
.menu li ul a{
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover,
.menu li ul li:hover a{
background:#2580a2 url('images/hover_sub.gif') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
.menu p{
clear:left;
}
I already added the subsubmenu's to the HTML (which, I believe, is done correctly):
<div id="menu" class="menu">
<ul>
<li><a href="#" >item1</a></li>
<li>item2</li>
<li>item3
<ul>
<li>subitem1</li>
<li>subitem2</li>
<li>subitem3
<ul>
<li>subsubitem1</li>
<li>subsubitem2</li>
</ul>
</li>
<li>subitem4</li>
<li>subitem5</li>
</ul>
</li>
<li>item4</li>
<li>item5</li>
</ul>
Here's the current situation: http://bit.ly/GRJkT5
As you can see, subsubitems 1 and 2 are displayed on top of subitems 4 and 5. How should I edit the CSS?
Thanks in advance!
Frank.

Answer 1

You should consider making use of the > combinator.
Example:
/* instead of... */
.menu li:hover ul{
display:block;
}
/* use... */
.menu li:hover > ul{
display:block;
}
This will ensure that only direct children of the hovered element will be affected by the style.
Use this combinator in the right places, and your problem should be solved.

Answer 2

Your third level submenu is not really getting positioned absolutely so its just appearing over your second level submenu. Properly position it relative to your submenu, use the child selector to display your second level submenu as Kolink suggested and it should work, like so:
CSS
.menu li:hover > ul{
display:block;
}
.menu li {
position:relative;
}
.menu ul ul ul {
position:absolute;
left:100%;
top:0;
}

Answer 3

Ok, small baby-steps here. I added coding for the subsubmenu's (I will condense the code later):
.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
}
#menu {
position:absolute;
left:250px;
top:0px;
width:750px;
height:35px;
border:0px solid #123456;
}
.menu ul{
background:#000000;
height:35px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#000000 url("images/seperator.gif") bottom right no-repeat;
color:#cccccc;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
background: #2580a2 url("images/hover.gif") bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
/* --- START SUBMENU -------------------------------------------------------------- */
.menu li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:0px;*/
/*left:0px;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
background:url('images/sub_sep.gif') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
.menu li:hover li a{
background:none;
}
.menu li ul a{
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#2580a2 url('images/hover_sub.gif') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
.menu p{
clear:left;
}
/* --- START SUBSUBMENU -------------------------------------------------------------- */
.menu li ul li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:0px;*/
/*left:0px;*/
}
.menu lu ul li:hover ul{
display:block;
}
.menu li li li {
background:url('images/sub_sep.gif') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
.menu li:hover li li a{
background:none;
}
.menu li ul li ul a{
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul li ul a:hover, .menu li ul li ul li:hover a{
background:#2580a2 url('images/hover_sub.gif') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
The result is here: http://bit.ly/Hl9SwM
The subsubmenu's (2.4.1 etc.) are displayed directly when hovering over menu 2, and their location is not correct (should be to the right of submenu 2.4). How can I change that?
Thank you!