Menu
Hello All,
I am designing a website for someone and I have made a vertical menu which has one ‘pop out UL’ in it. But when one hovers over it and it pops out, it does not stay out long enough for someone to be able to click on it?
Any idea what could be wrong?
This is my CSS code:
.menu{margin:0px; margin-bottom:15px; padding:0; width:200px; list-style:none;background:rgb(255,255,255); top:0px;}
.menu li{padding:0; margin:0 0 1px 0; height:40px; display:block; position: relative; }
.menu li a{text-align:left;height:40px; padding:0px 25px; font:16px Verdana, Arial, Helvetica, sans-serif; color:rgb(196,21,28); display:block; background:url(‘images/verMenuImages.png’) 0px 0px no-repeat; text-decoration:none;}
.menu li a:hover{background:url(‘images/verMenuImages.png’) 0px -40px no-repeat; color:rgb(255,255,255);}
.menu li a.active, .menu li a.active:hover{background:url(‘images/verMenuImages.png’) 0px -80px no-repeat; color:rgb(255,255,255);}
.menu li a span{line-height:40px;}
#menu ul ul {
position: absolute;
top: 0;
left: 200px; /* to position them to the right of their containing block
width: 200px; /* width is based on the containing block
display:block;
padding: 0.5px;
margin: 0px;
}
#menu ul ul
{
display:none;
}
#menu ul li:hover ul
{
display:block;
}
div#menu ul li:hover ul:hover
{
display:block;
background-color:Aqua;
}