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