zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Horizontales Menü mit 3 Ebenen (alle horizontal) im IE

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 21.01.2010, 14:04
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
  #2 (permalink)  
Alt 21.01.2010, 14:16
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


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


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:18 Uhr.