WN - IE <= 7 ignorerar width i <LI>

Har ett besynnerligt problem som jag inte kommer på en lösning till. Det är nämligen så att IE6 och IE7 ignorerar width på <LI>-element. Däremot funkar det finfint i Firefox och IE8. Har försökt strippa ner koden så gott det går, problemet ligger i den delen av CSS:en jag markerat.

Det är alltså en Suckerfish-meny jag vill få till, med en hover-effekt så att bakgrundsfärgen ändras när man håller musen över. Problemet visar sig genom att hela raden inte markeras.

Kod:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

        <style>        

 *ul, li {

 *        padding: 0px;

 *        margin: 0px;

 *        list-style: none;

 *}



 *#nav a {

 *        display: block;

 *}

 *

 *#nav li {

 *        float: left; 

 *}

 *

 *#nav li ul {

 * *position: absolute;

 *        left: -999em;

 *        border: 1px solid #808080;

 *}



 *#nav li:hover ul, #nav li.sfhover ul { 

 *        left: auto; 

 *}



 *#nav li:hover, #nav li.sfhover {

 *        background-color: #efefef;        

 *}

 *

 *#nav ul li {

 *        clear: left;

 *        display: block;

 *        width: 100%;   /* Här blir det fel */

 *}



        </style>



        <script type='text/javascript'>



 *sfHover = function() {

 *        var sfEls = document.getElementById("nav").getElementsByTagName("LI");

 *        for (var i=0; i<sfEls.length; i++) {

 * *sfEls[i].onmouseover=function() { this.className+=" sfhover"; }

 * *sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\b"), ""); }

 *        }

 *}



 *if (window.attachEvent) window.attachEvent("onload", sfHover);



        </script>

</head>

<body>



        <ul id='nav'>

 *<li><a href='./'>Flygplan</a><ul>

 *        <li><a href='#'>Boeing</a></li>

 *        <li><a href='#'>Airbus</a></li>

 *        <li><a href='#'>Fokker</a></li>

 *</ul></li>

 *<li><a href='#'>Bilar</a><ul>

 *        <li><a href='#'>Volvo</a></li>

 *        <li><a href='#'>Saab</a></li>

 *        <li><a href='#'>Koenigsegg</a></li>

 *</ul></li>

 *<li><a href='#'>Mopeder</a><ul>

 *        <li><a href='#'>Zündapp</a></li>

 *        <li><a href='#'>Puch</a></li>

 *        <li><a href='#'>Suzuki</a></li>

 *</ul></li>

        </ul>



</body>

</html>

Någon som har nån idé?