View Full Version : CSS Drop Down Menu (IE Bug)

09-11-2007, 09:50 PM
Open this webpage (http://www.freewebs.com/stanlychurch/) in Internet Explorer. Now, navigate the CSS menu on the left-hand side. Mouseover "About Us," then attempt to scroll over one of the sub-menus that come up.

Having trouble? The menus disappear after the mouse is moved slightly, and often times it is impossible to even get the sub-menus to highlight. Can anyone help me with the CSS coding? I believe there is a bug with IE that doesn't allow the sub-menus to be navigated, but I don't know what. It works in Mozilla, Opera, and other browsers.

BODY {font-family:"arial narrow" "arial" "helvitica"; font-size:12; margin-left:50px; padding:0px; padding-top:0px}
P {font-family:"arial narrow"; font-size:12;}

ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;

ul li {
position: relative;

li ul {
position: absolute;
left: 149px;
top: 0;
display: none;

ul li a {
display: block;
text-decoration: none;
color: #777;
background: transparent;
padding: 5px;
border: 0px solid #ccc;
border-bottom: 0px;

ul li a:hover{color:#777;

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
border-bottom: 0px solid #ccc;

li:hover ul, li.over ul { display: block; }


There is the CSS coding ("View Source" for HTML part of webpage), can anyone help fix this bug?

09-11-2007, 11:29 PM
Just a quick remark- I find that you can navigate them if you keep the left button depressed until you are over the selected point.

Not sure what this means, but it may help you to find it.

You have "@import "styles.css";"

Could you try this instead. It is the way that I always link to the style sheet.

<LINK REL="stylesheet" TYPE="text/css" HREF="styles.css">

This may help you decide,


09-12-2007, 10:19 AM
There is no submenu when I viewed in IE6, I think you may have to follow the Son of Suckerfish (http://www.htmldog.com/articles/suckerfish/dropdowns/example/vertical.html) method to get it work. They are using a support of Javascript.