Problem with IE in a menu with CSS

Question

Hi everyone.

I have a strange problem with IE in a CSS menu.

Have an <li> with a text and an <ul> (with position absolute) and <li> inside.

In Mozilla Firefox the sub <ul> assumes the desired position (see picture below).

In IE the text forces the sub <ul> to go forward. Any ideas?

Thanks in advance!

li {
float:left;
width:auto;
}
li ul {
left:-999em;
margin-left:0;
margin-top:5px;
padding:0;
position:absolute;
width:150px;
}
li:hover { 
left:auto 
}

Answer 1

There are three suggestions coming in my mind.

1 - You can use the Eric Meyer's reset css.
2 - You may go for ie7.js and make IE behave like standard compliant browser.
3 - Unrecommended way is to use IE6 hack like this:

* html ul li{
  /* your styles */
}

Answer 2

Sarfraz, thanks for your quick answer...I've tried your suggestions and didn't work, and then after some days I've discovered..it was a file created recently with ANSI codification. I have all files UTF-8 and the problem solved converting the ANSI file to UTF-8 with Notepad++. Thanks.