Frage stellen
ich habe ein Problem mit meiner Navigation im IE7. Die Navi war ein tutorial, dass ich umgebaut habe, jedoch scheint es nun nicht sauber zu laufen....eventuell weiß jemand Rat?
Kurze info...die Dropdown Boxen müssen über einem Flash(swf) angezeigt werden, warum ich mit dem Z-Index arbeiten musste, da ich Probleme hatte die Navi über dem Text anzeigen zu lassen!
Die Probleme sind auch lediglich im IE7 - der IE8 läuft sauber, IE6(optimiert) FF, Opera, Chrome und Safari zeigen auch alles sauber an! NUR IM IE7 SITZEN DIE BOXEN RECHTS neben den Naviagtionspunkten STATT DRUNTER...
- Code: Alles auswählen
#nav { /* all lists */
padding: 111px 0 0 0px;
list-style: none;
width: 915px;
height:28px;
z-index: 997;
}
#nav ul {
padding: 0;
list-style: none;
}
#nav a {
display: inline;
width: 120px;
color:#fff;
font-family: Helvetica, Arial, sans-serif;
font-size:12px;
line-height:28px;
padding:0px 20px 0px 25px;
text-decoration:none;
}
#nav a:hover{
color:#000;
}
#nav li { /* all list items */
display:inline;
float: left;
}
#nav li ul { /* second-level lists */
position: absolute;
background:url(img/dropdown_bg.jpg) #7e0000 repeat-x;
border-left:1px solid #510402;
border-right:1px solid #510402;
border-bottom:1px solid #510402;
border-top:1px solid #7e0000;
width: 158px;
left: -999em;
padding-left:2px;
z-index: 998;
}
#nav li ul a{ /* second-level lists */
display: block;
font-size:11px;
text-align:left;
z-index: 999;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
_margin-left:-138px;
_margin-top:21px;
z-index: 200;
}
#nav li:hover ul a:hover { /* lists nested under hovered list items */
background:url(img/dropdown_over.jpg) no-repeat;
width:155px;
color:#fff;
}
#content {
clear: left;
color: #ccc;
}
- Code: Alles auswählen
<ul id="nav">
<li><a href="#" class="active">NAV1</a>
<ul>
<li><a href="#">Nav1.1</a></li>
<li><a href="#">Nav1.2</a></li>
</ul>
</li>
<li><a href="#">NAV2</a>
<ul>
<li><a href="#">Nav2.1</a></li>
<li><a href="#">Nav2.2</a></li>
</ul>
</li>
</ul>