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
;
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;
}
