So, I used the information from this list apart article to make some verticle drop down menus. I'm pretty happy with the results except in IE, where the rollover menu is unstable. You have to roll over the first menu item just right or the other menu items that appeared during the rollover disappear again too quickly. I followed the CSS and JS and everything else almost to a tea. I'm noticing this same problem in the example that the programmer who wrote the article gives. Sooo frustrating!
I've been looking for a decent verticle/horizontal drop down menu option for years, and this is the closest I've come to anything working, but I can't seem to fix this one little bug. Can anyone help me? Or, do you have any better suggestions for a roll over menu?
Here's a link to the website I'm working on: http://www.turtleshell.frih.net/index.html. Works fine in firefox, Safari, not so much in IE.
This is the CSS:
Code:
div.menu {
color: #fdbe00;
text-align: left;
float: left;
font-weight: bold;
}
#nav {
list-style-type: none;
margin: 0px;
padding: 0px;
width: 150px;
border-bottom: 1px solid #ccc;
}
#nav li {
position: relative;
width: 150px;
}
#nav li a {
display: block;
padding: 5px;
border: 1px solid white;
border-bottom: 0px;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */
#nav li:hover ul, #nav li.over ul {
display: block;
width: 150px;
padding-left: 0px;
margin-left: 0px;
border-bottom: 1px solid white;
}
#nav li ul {
position: absolute;
left: 149px;
top: 0;
display: none;
list-style-type: none;
}
#nav li ul li {
background-color: #0d1549;
}
#nav li.top {
margin-top: 25px;
} |
