IE CSS Drop Down Menu Issues

[testcss]

Hello,
I am kind of a newbie at CSS and therefore a newbie at resolving issues for CSS problems in different browsers. In all other web browsers except IE , my drop down works perfectly. When the drop down is used in IE, however, instead of "dropping down" it flows out horizontally and covers the drop down button next to it. I know it does this in IE 7 and IE 8, not quite sure about IE 9, but alas the majority of users will be web browsing in those browsers and I need better compatibility. Is there something wrong with my CSS? Is this issue known to happen to CSS-only drop down menus? Should I switch to a combined CSS and Jquery-based dropdown menu. I have already checked to make sure if the -moz-kit and -web-kit shadows (already took out the IE box shadow hack because it cause the text to have shadow which I didn't like) were affecting IE using inspect in IE, so that is one thing that it is not the problem.

Thanks, sorry for the lengthy CSS and issue, and here's the CSS for the drop down only:

#nav-menu ul
{
list-style: none;
padding: 0;
margin: 0;
}

#nav-menu li
{
float: left;
margin: 1px;
}

#nav-menu li a
{
background: #ff0000;
height: 50px;
line-height: 25px;
float: left;
width: 239px;
display: block;
border: 1px solid #000;
color: #0d2474;
text-decoration: none;
text-align: center;
border-style: solid;
border-width: 1px;
	-moz-box-shadow: 3px 3px 4px #000;
	-webkit-box-shadow: 3px 3px 4px #000;
	box-shadow: 3px 3px 4px #000;
	
}
#nav-menu li a:hover
{
background: #FF3333;
height: 50px;
line-height: 35px;
float: left;
width: 239px;
display: block;
border: 1px solid #000;
color: #0d2474;
text-decoration: underline;
text-align: center;
	-moz-box-shadow: 3px 3px 4px #000;
	-webkit-box-shadow: 3px 3px 4px #000;
	box-shadow: 3px 3px 4px #000;
	}
#nav-menu li ul 
{
	display: none; 
	background-color: #FF3333;
}
#nav-menu li:hover ul 
{
	display: block;
	position: absolute;
	margin: 0;
	padding: 0; 
}
#nav-menu li:hover li 
{
	float: none; 
}

#nav-menu li:hover li a 
{
	background: #FF3333;
height: 50px;
line-height: 35px;
float: left;
width: 239px;
display: block;
border: 1px solid #000;
color: #0d2474;
text-align: center;
	-moz-box-shadow: 3px 3px 4px #000;
	-webkit-box-shadow: 3px 3px 4px #000;
	box-shadow: 3px 3px 4px #000;
}
#nav-menu li li a:hover 
{
	background: #FF3333;
height: 50px;
line-height: 35px;
float: left;
width: 239px;
display: block;
border: 1px solid #000;
color: #03F;
text-decoration: underline;
text-align: center;
	-moz-box-shadow: 3px 3px 4px #000;
	-webkit-box-shadow: 3px 3px 4px #000;
	box-shadow: 3px 3px 4px #000; 
}

 

[Dunmail]

The browser specific prefixes won't affect other browsers so that won't have been a problem.

For dropdown/flyout menus have a look at http://www.cssplay.co.uk/menu/ there's lots there and it's likely that one or more examples will help you.

One thing that I notice is that you use position:absolute but don't specify left or top values and it could be that IE requires them.

 

[testcss]

Thanks for your consideration for reading through my problem. I read through some of the articles on CSS Play and couldn't find an exact fix. You talked about something to do with the position:absolute tags, could you please elaborate as I don't quite understand what you are saying. I thought the only values for position were static, absolute, and relative.

 

[manueld]

try setting a width for this id "#nav-menu li ul" to keep it going horizontally, additionally add a position of top:50px; so it doesn't show up on top of the main navigation. if this breaks it for other browsers, put this is a separate css and as a conditional statement for ie 7 and 8. hope this helps.

 

[testcss]

Success! Your fixes worked like a charm. With the top:50px I only had to change it to 55px to perfectly aligned my site but over all the fix is cross-browser supported and easy. Thanks for the help, I know I will but I hope I don't have to deal with IE much more.

 

[Dunmail]

Using "position:absolute" takes the element out of the normal 'flow' of the document. This means that you can position it where you like so you can use the "left", "top", "right" and "bottom" properties to fix its position in the document.

In the case of a flyout/dropdown menu you can set the initial value of say "left" to -9999px so that it is way off the screen, then when the user hovers over the menu you have the ":hover" pseudo state position it in the place you want.

Hope this helps (note that the above is very much simplified )