Zum Inhalt springen

IE: Submenü wird nicht angezeigt

Erstellt am 27. Februar 2011 · 2 Antworten · letzte Antwort am 28. Februar 2011

Tags: HTML & CSS, Frage

Sichtbarer ·

Ich habe ein horizontales Menü mit einer Submenü-Ebene.

Im FF/Chrome gibt es keine Probleme, der IE streikt jedoch. Ich habe bereits versucht das ganze mittels der csshover3.htc File zu lösen. Ohne Ergebnis jedoch.

Das Submenü klappt beim IE einfach nicht aus, auch funktioniert der Mouseover-Effekt für den Background des Menüelementes nicht.

Hier meine Typoscript

lib.menu = HMENU
lib.menu {
1 = TMENU
1 {
expAll =1
wrap = <ul id="navi">|</ul>
noBlur = 1
NO = 1
NO {
wrapItemAndSub = <li>|</li>
stdWrap.htmlSpecialChars = 1
ATagTitle.field = title
}
ACT <.NO
ACT {
wrapItemAndSub = <li>|</li>

}
}

2 < .1
2 {
wrap = <ul>|</ul>
ACT.wrapItemAndSub = <li>|</li>
}

}

Hier die HTML:

<div id="main"> 
                <ul id="navi"> 
                    <li> <a href="#"> AKTUELLES </a> <!-- Oberpunkt --> 
                        <ul> 
                            <li> <a href="#">AKTUELLES 1 </a> </li> <!-- Unterpunkt --> 
                            <li> <a href="#">AKTUELLES 2 </a> </li> <!-- Unterpunkt --> 
                        </ul> 
                    </li> 
                     
                    <li> <a href="#">Oberpunkt</a> <!-- Oberpunkt --> 
                        <ul> 
                            <li> <a href="#">Unterpunkt 1 </a> </li> <!-- Unterpunkt --> 
                            <li> <a href="#">Unterpunkt 2 </a> </li> <!-- Unterpunkt --> 
                            <li> <a href="#">Unterpunkt 3 </a> </li> <!-- Unterpunkt --> 
                        </ul> 
                    </li> 
                    <li> <a href="#">Oberpunkt</a></li> <!-- Oberpunkt --> 
                    <li> <a href="#">Oberpunkt</a></li> <!-- Oberpunkt --> 
                    <li> <a href="#">Oberpunkt</a></li> <!-- Oberpunkt --> 
                </ul> 
            </div>

Und zu guter letzt die CSS:

body {
    margin: 0px;
    padding: 0px;
    height: 100%;
    font-family: Verdana, arial, helvetica, sans-serif;
    font-weight: normal;
    background-image:url('../images/background.jpg');
    background-repeat: repeat-x;
    width: 100%;
    text-align: center;
    font-size: 76%;
    line-height: 150%;
    background-color: #e7e7e7;
    behavior:url("../scripts/csshover3.htc");
}


/* Navigation*/

#navi, #navi ul {
    list-style-type:none;
    margin:0px; 
    padding:0px;
    line-height: 35px; /* zentriert die die Schrift der Buttons*/
    list-style-image: none;
    font-weight: normal;
}
#navi a{
    text-decoration: none;
    color: #333333;
    font-size: 13px;
    display: block;
}
#navi a:hover{
    text-decoration: none;
    color: #ff9900;
}

#navi li { 
    width:193px; 
    height:35px;
    float:left; 
    background-image:url("../images/main_button.png");
    background-repeat: no-repeat;
    }

#navi li ul { 
    display: none;
}

#navi li:hover{
    background-image:url("../images/main_button_hover.jpg");
    background-repeat: no-repeat;

}

#navi li:hover ul { 
    display: block;
    
}
#navi li ul li {
    margin-top: 0px;
    background-image:url("../images/main_button_hover2.jpg");
    background-repeat: no-repeat;
}

#navi li ul li:hover {
    margin-top: 0px;
    color: #999999;
    background-image:url("../images/main_button_hover2.jpg");
    background-repeat: no-repeat;
}

#header_space{
    width: 965px;
    height: 154px;
    background-color: transparent;
    float: left;
    border-bottom-width: 1px;
    border-bottom-color: #ff9900;
    border-bottom-style: solid;    
    z-index: 9999;
    position: absolute;
    top: 110px;
}

#header-bg{
    z-index: -52;
}
#fl_header_slide_slideshow{
    z-index: -51;
}
#main{
    width: 965px;
    height: 35px;
    background-color: transparent;
    float:left;
    text-align: center;
    position:absolute;
    z-index: 99999;
    top: 265px;
}

Weiß jemand was da los ist???

Danke und Grüße

etux ·

Habe alles nur schnell überflogen, aber der Pfad zu htc-Datei sollte vom root-Ordner ausgehen. So war es zumindest bei den älteren Versionen.
Also nicht aus der CSS-Datei ausgehend:
behavior: url(../scripts/csshover3.htc);
Sondern beispielsweise:
behavior:url(fileadmin/scripts/csshover3.htc);

.

jeth-de ·

Hallo Zusammen, das Problem hatte ich bis vor kurzem auch.
Es könnte höchstwahrscheinlich am doctype liegen

mit
page.config.doctype =xhtml_trans
kann man den doctype auf xhtml ( <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
)

umstellen, das hat bei mir geholfen.

Lg Jens
Hier noch der Link zum komplette Tutorial, was ich dazu verfasst habe:
http://www.jeth.de/index.php/typo3-dropdown-menue.html