horizontal dropdown menu css 3 levels

Third level don't work

[tappat]

I’m trying to do a three-level menu (Menu on black background - the “hover” on red background). (Home.aspx)
It works badly.
From 1 to 2 level: it works.
Moving on from 2. to 3. level It gives some problems: It opens fine but the voices of the third level are opening with a red background, and so remain, instead of opening on a black background and then turn red on mouse hover.
I'm not sure where and how to set them in the stylesheet!
Can you help me? Here is my css code.

Thanks ! Tappat


.menu
{
float: left;
width: 565px;
height: 55px;
padding-left: 16px;
padding-right: 6px;
padding-top: 22px;
text-align: center;
font-family: Verdana;
font-size: 8pt;
color: #FFFFFF;
}
.menu ul
{
list-style:none;
margin:0;
padding:0;
}
.menu a {
display:block;
color: #FFFFFF;
text-decoration:none;
font-weight:normal;
line-height:30px;
margin:0px;
padding:0px 15px;
text-align:center;
font: Verdana, Tahoma, sans-serif;
}
.menu a:hover {
background: url(../images/hover.png) #ad0101 no-repeat bottom center;
color:#FFFFFF;
text-decoration:none;
}
.menu li{
float:left;
padding:0px;
position: relative;
}
.menu ul ul
{
position: absolute;
z-index: 500;
}
.menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}

div.menu ul ul,
div.menu ul li:hover ul ul,
div.menu ul ul li:hover ul ul
{display: none;}

div.menu ul li:hover ul,
div.menu ul ul li:hover ul,
div.menu ul ul ul li:hover ul
{display: block;}

.menu li a{
display:block;
font-weight:normal;
line-height:30px;
margin:0px;
padding:0px 15px;
text-align:center;
text-decoration:none;
color: #FFFFFF;
}
.menu li.current a
{
display: block;
font-weight: normal;
line-height: 30px;
margin: 0px;
padding: 0px 15px;
text-align: center;
text-decoration: none;
color: #FFFFFF;
background-position: center bottom;
background-image: url(../images/current.png);
background-repeat: repeat-x;
}
.menu li a:hover, .menu ul li:hover a{
background: url(../images/hover.png) #ad0101 no-repeat bottom center;
color:#FFFFFF;
text-decoration:none;
}
.menu li ul{
background:#2F3130;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
}
.menu li:hover ul{
display:block;
}
.menu li li
{
display: block;
float: none;
margin: 0px;
padding: 0px;
width: 225px;
background-image: url(../images/sep.gif);
background-repeat: no-repeat;
background-position: left bottom;
}
.menu li:hover li a{
background:none;
}
.menu li ul a{
display:block;
height:30px;
font-size:10px;
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: url(../images/hover_sub.png) #ad0101 no-repeat left center;
border: 0px;
color: #ffffff;
font-size: 10px;
text-decoration: none;
}

[caffinated]

I think your biggest problem here is that you have a very messy css configuration. You have some generic setups which are confusing the specifics and you have quite a few repeated selectors.

For example, near the top, you use:

.menu a {etc}

and this contains a very specific layout, yet you have two formats of anchor, so this generic version is not really appropriate - unless you make this the setup for the drop down anchors and specify a specific for the top, but I think that may confuse things more for you. It may not follow the most efficient coding practice but as a beginner, I recommend you start from scratch and work down the menu system. Do not be afraid of using long-hand selectors such as:

.menu ul li ul li a

rather than just .menu li li a

you may find that this keeps it easier to follow which selector you are dealing with. If you are picky about efficient code, you can review when you are finished, and reduce the selectors then.

I think it is worth pointing that you can't hover a list item in IE6, so if this is going to be public, it will break for a yet reasonable percentage of visitors. This can be resolved with a little javascript and there is plenty of advice elsewhere in WebmasterWorld on this subject if you care to do a search.