Horizontales Menü mit 3 Ebenen (alle horizontal) im IE

[Lezlie]

Hallo zusammen,

da ich nun schon so viel Zeit mit meinem Menü verbracht habe und einfach nicht weiterkomme, stelle ich die Frage doch mal den Experten. Im Firefox gibt es mit dem Menü kein Problem, nur die IE-Versionen wollen nicht mitspielen. Im IE sind die Menüebenen 2 und 3 vertikal statt horizontal. Ich denke, dass das Problem bei display, float oder width liegt, komme aber auf keine Lösung.

Hier mal der Code für das Menü:

  
  <!-- Menü -->  
  <div id="menu">  
    <table width="100%">  
      <colgroup>  
      <col width="20%" />  
      <col width="80%" />  
      </colgroup>  
      <tr>  
      <td></td>  
      <td height="30px" valign="bottom">  
  
  
    <div id="menu1">  
  
    <ul>  
      <li class="menuitem"><a href="#">Test 1</a></li>  
    </ul>  
  
    <ul><!-- link -->  
      <li class="menuitem"><a href="#">Test 2</a>  
          <ul>  
            <li><a href="#">Sub 1</a></li>  
            <li><a href="#">Sub 2</a></li>  
            <li><a href="#">Sub 3</a></li>  
          </ul>  
      </li>  
    </ul>  
  
  
    <ul>  
      <li class="menuitem"><a href="#">Test 3</a>  
         <ul>  
            <li><a href="#">Sub 1</a></li>  
            <li><a href="#">Sub 2</a>  
              <ul>  
 		 <li><a href="#">Subsub 1</a></li>  
                 <li><a href="#">Subsub 2</a></li>		  
 		 <li><a href="#">Subsub 3</a></li>  
              </ul>  
            </li>  
          </ul>  
  
      </li>  
    </ul>  
  
  
  </div>  
  </td></tr></table></div>  

Und hier nun der CSS-Teil dazu:

  
#menu  
{ margin: 0;  
  float: left;  
  width: 100%;  
  background-repeat: repeat;}  
  
.menuitem  
{}  
  
  
#menu1  
{ margin: 0;  
  padding: 0;  
  z-index: 30;}  
  
  #menu1 ul  
  { list-style: none;  
    margin: 0;  
    padding: 0;  
    width: auto;}  
  
  #menu1 ul li  
  { float: left;  
    /*width: auto;*/  
    display: inline;  
    margin-top: 1px;}  
  
  #menu1 li  
  { position: relative;  
    display: inline; /*Elemente in einer Zeile darstellen*/  
    margin: 0 1px 0 0;  
    padding: 3px;  
    background: #C0C0C0;  
    list-style: none;  
    float: left;  
    width: auto;}  
  
  #menu1 li a  
  {	display: block; /*Untermenü wird unterhalb des Menüpunktes angezeigt*/  
  	margin: 0 1px 0 0;  
        padding: 6px 6px;  
        width: auto;  
	background: #C0C0C0;  
	color: #000000;  
	text-align: center;  
	text-decoration: none;  
        font: bold 11px arial;}  
	  
  #menu1 li a:hover, #menu1 li a.sfhover  
  {	background: #FF9900;  
        color: #FFF;}  
  
  #menu1 ul li ul  
  { position: absolute;  
    top: 100%;  
    left: 0;}  
  
  #menu1 ul ul  
  { position: absolute;  
    z-index: 500;  
    width: 720px;}  
  
  #menu1 ul ul li  
  { float: left;  
    /*width: auto;*/  
    display: inline;  /*Element wird in der gleichen Zeile dargestellt*/  
    margin-top: 1px;}  
  
  #menu1 ul ul li a  
  { font: normal 11px arial;}  
  
  
  #menu1 ul ul ul  
  { position: absolute;  
    top: 100%;  
    left: 0;  
    width: 720px;}  
  
  #menu1 ul ul ul li  
  { float: left;  
    display: inline;  
    /*width: auto;*/}  
  
  
  div#menu1 ul ul,  
  div#menu1 ul li:hover ul ul,  
  div#menu1 ul ul li:hover ul ul,  
  div#menu1 ul li.sfhover ul ul,  
  div#menu1 ul ul li.sfhover ul ul  
      {display: none;}  
  
  div#menu1 ul li:hover ul,  
  div#menu1 ul ul li:hover ul,  
  div#menu1 ul ul ul li:hover ul,  
  div#menu1 ul li.sfhover ul,  
  div#menu1 ul ul li.sfhover ul,  
  div#menu1 ul ul ul li.sfhover ul  
      {display: block;}  
  

Kann mir dabei jemand helfen?

Viele Grüße,
Lezlie

[Lezlie]

Das muss noch in den head der HTML-Datei, damit die Hover im IE funktionieren:

  
<script type="text/javascript">  
// Suckerfish hover pseudo class  
sfHover = function() {  
	var sfEls = document.getElementById("menu1").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>