I am having problems with a menu triggered on a hover; it doesn’t stay open as I mouse down to the actual menu items.
I had this problem with another design too, described in this post and with an answer provided in [URL=“http://www.sitepoint.com/forums/css-53/questions-about-styling-reversing-css-drop-down-646920.html#post4432289”]this post.
However, I can’t seem to apply the same solution in this case. I am not sure what is creating the apparent gap between the list item and the drop-down, since I am just using the height of the list item to push the drop-down down a bit.
Site: Hippoi Athanatoi: If Wishes Were Horses (mouse over “Home” to see how the drop-down behaves)
CSS:
ul#MenuLeft, ul#MenuLeft ul {
height:25px;
left:210px;
list-style:none;
margin:0;
padding:0;
position:absolute;
top:90px;
width:460px;
}
ul#MenuLeft ul {
background:#5B8699 url(http://www.hippoiathanatoi.com/Graphics/bg_blue.png) repeat;
border:5px solid #CC5C46;
font:normal normal normal 16px Cambria, Georgia, serif;
height:auto;
padding-left:10px;
width:175px;
}
ul#MenuLeft li, ul#MenuLeft li a {
float:left;
position:relative;
text-decoration:none;
text-indent:-999em;
}
ul#MenuLeft li {
height:50px;
}
ul#MenuLeft li a {
background:url(http://www.hippoiathanatoi.com/Graphics/menu_left-ha.png) no-repeat 0 0;
height:25px;
}
ul#MenuLeft li a:focus {
outline:0
}
ul#MenuLeft li.Home, ul#MenuLeft li.Home a {
background-position:0 0;
width:68px;
}
ul#MenuLeft li.Home a:hover {
background-position:0 -25px
}
ul#MenuLeft li.Updates, ul#MenuLeft li.Updates a {
background-position:-68px 0;
width:109px;
}
ul#MenuLeft li.Updates a:hover {
background-position:-68px -25px
}
ul#MenuLeft li.Digest, ul#MenuLeft li.Digest a {
background-position:-177px 0;
width:74px;
}
ul#MenuLeft li.Digest a:hover {
background-position:-177px -25px
}
ul#MenuLeft li ul {
left:0;
margin-left:-999em;
position:absolute;
top:100%;
}
ul#MenuLeft li li {
float:none;
height:25px;
width:175px;
}
ul#MenuLeft li li a {
background:none;
text-indent:0;
}
ul#MenuLeft li:hover ul ul {
margin-left:-999em;
}
ul#MenuLeft li:hover ul, ul#MenuLeft li li:hover ul {
margin-left:0;
}
ul#MenuLeft li li a:link, ul#MenuLeft li li a:visited {
color:#C8BDB0;
text-decoration:none;
}
ul#MenuLeft li li a:link:hover, ul#MenuLeft li li a:visited:hover, ul#MenuLeft li li a:link:active, ul#MenuLeft li li a:visited:active {
color:#CC5C46;
text-decoration:underline;
}