Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 21.01.2010, 15:04
Lezlie Lezlie ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.01.2010
Ort: Bodensee
Beiträge: 1
Lezlie befindet sich auf einem aufstrebenden Ast
Unglücklich Horizontales Menü mit 3 Ebenen (alle horizontal) im IE

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
Mit Zitat antworten
Sponsored Links