• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Problem mit Drop-Down Menü im IE!

I

_iChris_

Neues Mitglied
Hallo,

Wie oben schon erwähnt schaffe ich es nicht das das Drop-Down Menü meiner Website im IE ausklappt bzw. auf das ausgeklappte Menü mit dem Cursor zu kommen. Ich lade hier einfach mal nur das Drop-Down Menü hoch ... Vielleicht kann mir ja jemand weiterhelfen ... Wäre toll denn das verzweifelt mich langsam schon ;D

Anhang anzeigen test2.zip
 
Vlt. zeigst Du uns direkt den Quellcode hier? Denn ich bezweifle, dass sich jemand deine Datei runterladen wird - wer weiß was da drinne ist ;)
 
Bitte stelle den Code hier rein. Keiner der dich nicht kennt wird einfach etwas herunterladen, von dem er nicht weiss was drin ist.

Welche IE Version?
 
Meine style.css:

#menuebox {
position: relative;
height: 30px;
}
.stupidie {
display: none;
}
#menue {
position:absolute;
top: 5px;
left: 0;
z-index: 200;
}

#menue .aussen {
float: left;
display: block;
overflow: hidden;
width: 8em;
height: 1.3em;
font-weight: bold;
text-align: center;
background-color: #dec79a;
color: #513913;
border: 1px solid;
border-color: #d0843e #78561d #78561d #d0843e;
}
#menue .aussen:hover {
height: auto;
background-color: #624617;
color: #fff;
}

a.innen-1 {
margin-top: 2px;
}
a.innen,
a.innen-1 {
display: block;
width: 7.9em;
padding: 2px 0;
text-decoration: none;
font-weight: normal;
border-bottom: 1px solid #78561d;
background-color: #ecd8ae;
color: #600;
}
a:visited.innen,
a:visited.innen-1 {
background-color: #ecd8ae;
color:#555;
}
a:hover.innen,
a:hover.innen-1 {
background-color: #f7eedb;
color: #900;
}

span.menutag {
display: block;
cursor: default;
}


Meine styleIE.css:

#menue {
display:none;
}
.stupidie {
display: block;
position: absolute;
height:100px;

}

a.auss {
float: left;
width: 128px;
height: 43px;
overflow: hidden;
display: block;
font-weight: bold;
text-align: center;
text-decoration: none;
background-color: #dec79a;
color: #513913;
border-right: 1px solid;
border-color: darkgray;
}
a:hover.auss {
overflow: visible;
background-color: red;
color: #fff;
height:43px;

}
a:hover.auss table {
display: block;
margin: 0px;
background-color: green;
color: blue;
height:auto;
overflow:visible;
}

a.inn {
display: block;
margin: 0px;
background-color: green;
color: blue;
height:auto;
overflow:visible;
}
a:visited.inn {
background-color: #ecd8ae;
color:#444;
overflow:visible;

}
a:hover.inn {
position: relative;
background-color: #f7eedb;
color: #900;
overflow:visible;
float:left;

}
span.menutag {
display: block;
cursor: default;
height:43px;
overflow:visible;


}

Und schlussendlich meine test2.htm:

<html>
<head>
<title>test2.htm</title>
<meta name="author" content="Christian">
<link rel="stylesheet" href="styleIE.css" type="text/css"></link>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">




<div id="menuebox">

<div id="menue">
<div class="aussen">
<span class="menutag">Produkte</span>
<a class="innen-1" href="#">Systeme</a>
<a class="innen" href="#">Speicher</a>
<a class="innen" href="#">Laufwerke</a>
<a class="innen" href="#">Monitore</a>
<a class="innen" href="#">Drucker</a>
<a class="innen" href="#">Zubehör</a>
</div>
<div class="aussen">
<span class="menutag">Leistungen</span>
<a class="innen-1" href="#">Netzwerke</a>
<a class="innen" href="#">Server</a>
<a class="innen" href="#">Wartung</a>
</div>
<div class="aussen">
<span class="menutag">Service</span>
<a class="innen-1" href="#">Reparatur</a>
<a class="innen" href="#">Konfiguration</a>
<a class="innen" href="#">Software</a>
<a class="innen" href="#">Schulung</a>
</div>
<div class="aussen">
<span class="menutag">Links</span>
<a class="innen-1" href="#">About Us</a>
<a class="innen" href="#">Partner</a>
<a class="innen" href="#">Referenzen</a>
</div>
</div><!-- menue -->

<!-- Der folgende Block bedient nur IEs!
Durch diese Redundanz vermeiden wir den Einsatz von Javascript. -->

<!--[if IE]>
<div class="stupidie">
<a class="auss" href="#"><span class="menutag">Home</span>
<table><tr><td>
<a class="inn" href="#">Vorwort</a>
<a class="inn" href="#">Aktuelles</a>
</td></tr></table>
</a>
<a class="auss" href="#"><span class="menutag">Mannschaften</span>
<table><tr><td>
<a class="inn" href="#">Herren</a>
<a class="inn" href="#">Jugend</a>
<a class="inn" href="#">Senioren</a>
</td></tr></table>
</a>
<a class="auss" href="#"><span class="menutag">Events</span>
<table><tr><td>
<a class="inn" href="#">Turniere</a>
<a class="inn" href="#">Meisterschaft</a>
<a class="inn" href="#">Sonstiges</a>
</td></tr></table>
</a>
<a class="auss" href="#"><span class="menutag">Trainer</span>
</a>
<a class="auss" href="#"><span class="menutag">Verein</span>
<table><tr><td>
<a class="inn" href="#">Vorstand</a>
<a class="inn" href="#">Tennishalle</a>
<a class="inn" href="#">Tennisplätze</a>
<a class="inn" href="#">Buffet</a>
<a class="inn" href="#">Vereinsgeschichte</a>
</td></tr></table>
</a>
<a class="auss" href="#"><span class="menutag">Galerie</span>
</a>
<a class="auss" href="#"><span class="menutag">ITN-Rangliste</span>
</a>
<a class="auss" href="#"><span class="menutag">Mitglied</span>
<table><tr><td>
<a class="inn" href="#">Preise</a>
<a class="inn" href="#">Kontakt</a>
</td></tr></table>
</a>
<a class="auss" href="#"><span class="menutag">Impressum</span>
</a>
</div><!-- stupidie -->
<![endif]-->

</div><!-- menuebox -->




</body>
</html>

Obwohl das ganze jetzt sowieso nur im IE funktioniert lade ich trotzdem alle Dateien hoch die damit zusammenhängen ...
 
Hallo,

du bekommst von mir jetzt den HTML-Code in geänderter Fassung und das zugehörige CSS. Beides zusammen funktioniert in allen Browsern die neuer sind als IE 6.

Ich will dir aber noch mitgeben, dass du dich mit den Grundlagen beschäftigen musst. Du hast nämlich schon falsch angefangen. Man erstellt erst ein Seitenlayout und darin kommt dann das Menü. Layouts findest du hier: The Left Menu 2 column Liquid Layout. Pixel widths. Cross-Browser. Equal Height Columns.

Nichts desto trotz habe ich dir da Menü mal in die Seite gebaut.

HTML Code
HTML: 
<!DOCTYPE HTML>
<html>                   
    <head>                                   
        <meta charset=utf-8>                                   
        <title>test2.htm                                    
        </title>                                   
        <meta name="author" content="Christian">                                   
        <link rel="stylesheet" href="style.css" type="text/css">                                           
    </head>                   
    <body>                                   
        <div class="menu_container">                         
            <ul class="menu">                                                                            
                <li>                
                <a href="#nogo">Produkte</a>                                                                                                          
                <ul>                                                      
                    <li>                                                      
                    <a href="#">Systeme</a>                                                      
                    </li>                                                                           
                    <li>                                                      
                    <a href="#">Speicher</a>                                                      
                    </li>                                                                         
                    <li>                                                      
                    <a href="#">Laufwerke</a>                                                      
                    </li>                                                                           
                    <li>                                                      
                    <a href="#">Monitore</a>                                                      
                    </li>                                                                           
                    <li>                                                      
                    <a href="#">Drucker</a>                                                      
                    </li>                                                                           
                    <li>                                                      
                    <a href="#">Zubehör</a>                                                      
                    </li>                                                           
                </ul>                                          
                </li>                                                                               
                <li>                
                <a href="#nogo">Leistungen</a>                                                                                                         
                <ul>                                                      
                    <li>                                                      
                    <a href="#">Netzwerke</a>                                                      
                    </li>                                                                           
                    <li>                                                      
                    <a href="#">Server</a>                                                      
                    </li>                                                                           
                    <li>                                                      
                    <a href="#">Wartung</a>                                                      
                    </li>                                                           
                </ul>                                          
                </li>                                                                                
                <li>                
                <a href="#nogo">Service</a>                                                                                                          
                <ul>                                                      
                    <li>                                                      
                    <a href="#">Reparatur</a>                                                      
                    </li>                                                                           
                    <li>                                                      
                    <a href="#">Konfiguration</a>                                                      
                    </li>                                                                           
                    <li>                                                      
                    <a href="#">Software</a>                                                      
                    </li>                                                                           
                    <li>                                                      
                    <a href="#">Schulung</a>                                                      
                    </li>                                                           
                </ul>                                          
                </li>                                                                                
                <li>                
                <a href="#nogo">Links</a>                                                                                                           
                <ul>                                                      
                    <li>                                                      
                    <a href="#">About Us</a>                                                      
                    </li>                                                                           
                    <li>                                                      
                    <a href="#">Partner</a>                                                      
                    </li>                                                                           
                    <li>                                                      
                    <a href="#">Referenzen</a>                                                      
                    </li>                                                           
                </ul>                                          
                </li>                                           
            </ul>                 
        </div>                               
    </body>
</html>

CSS Code bei dir style.css
HTML: 
/* CSS für das Menü */
.menu_container {
    margin: 0 auto 300px auto;
    position: relative;
    width: 750px;
    height: 25px;
    z-index: 100;
}
.menu, .menu ul {
    padding: 0;
    margin: 0;
    list-style: none;
    position: absolute;
}
.menu ul {
    left: -9999px;
    width: 150px;
    padding: 0 20px 20px 20px;
}
.menu ul ul {
    padding: 20px 20px 20px 0;
}
.menu a {
    display: block;
    width: 139px;
    padding-left: 10px;
    text-align: center;
    font: normal bold 1em/25px arial, sans-serif;
    color: #fff;
    text-decoration: none;
    border: 1px solid #d0843e;
    margin: 0 -1px -1px 0;
    background-color: #dec79a;
    color: #513913;
}
.menu li ul a {
    font-weight: normal;
}
.menu li {
    float: left;
}
.menu li:hover {
    position: relative;
    z-index: 100;
}
.menu li:hover > a {
    background-color: #624617;
    color: #fff;
    border-color: #fc0;
}
.menu li:hover > ul {
    top: 26px;
    left: -20px;
    z-index: -1;
}
.menu li:hover li:hover > ul {
    left: 145px;
    top: -20px;
    z-index: 100;
}
.menu li.right:hover li:hover > ul {
    left: -165px;
    top: -20px;
    z-index: 100;
    padding: 20px 0 20px 20px;
}
 
Vielen, vielen, vielen, vielen, .... Dank ;D ... Das Problem waren nicht die Grundlagen sondern das ich auf der Seite schon so viel herumgebastelt habe, dass ich mich einfach irgendwann nicht mehr auskannte ... ^^
PS: Habe bereits ein Seitenlayout aber wegen des Problems mit dem IE wollte ich mich dann extra damit beschäftigen und habe mir deshalb diesen Ausschnitt herausgeholt ...

MfG Chris
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben