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

Lezlie · #1 (**permalink**) 21.01.2010, 15:04

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. Leider haben mir die FAQ zu horizontalen Menüs hier im Forum auch nicht weitergeholfen.

Hier mal der Code für das Menü:

HTML-Code:

<!-- 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:

Code:

#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;}

In den Header der HTML-Seite muss noch der Suckerfish-Code, damit die Hover im IE funktioneren:

HTML-Code:

<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>

Kann mir von euch jemand bei diesem Problem helfen?

Viele Grüße,
Lezlie

fricca · #2 (**permalink**) 21.01.2010, 15:16

Bitte poste immer einen Link zum Problem, nicht nur Codeschnipsel.
Siehe auch: http://xhtmlforum.de/40080-f-r-frage...twortende.html

Welcher IE? Welcher Doctype? Welcher Darstellungsmodus?
Warum ist da eine Tabelle um das Menü?
Du willst ein Menü. Also brauchst du eine Liste, in die weitere hineingeschachtelt werden. Du aber hast 3 Listen.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Horizontales Drop-Down Menü (Liste) mit 2 Ebenen	Christofer	CSS	1	19.05.2010 15:33
Darstellungsproblem	flohpapa	CSS	3	16.12.2009 09:55
Horizontales Menü - zweizeilig	franc	CSS	11	13.10.2008 13:35
Horizontales Menü mit "Bildhover"	ghoum	CSS	2	09.09.2007 00:17
Navigation, alle Ebenen horizontal??	Schengo	CSS	0	10.08.2007 09:48