NicolaibassDH |
17.09.2008 18:23 |
CSS DropDown - läuft nicht im IE6
Hallo zusammen,
ich habe ein ziemliches Problem, meine DropDown Navigation läuft nicht im IE6.
Hier mal der Code der Navigation:
Code:
<div class="navsub_tp_bg"></div>
<h1 class="invisible">Navigation Main</h1>
<div id="navigation_main">
<div class="navigation_tp">
<ul id="nav_top">
<li><a id="nav_01" href="ddd.html" title="Nav 01">Nav 01</a>
<ul id="nav-01-dd">
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
</ul>
</li>
<li><a id="nav_02" href="ddd.html" title="Nav 02">Nav 02</a>
<ul id="nav-02-dd">
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
</ul>
</li>
<li><a id="nav_03" href="ddd.html" title="Nav 03">Nav 03</a>
<ul id="nav-03-dd">
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
</ul>
</li>
<li><a id="nav_04" href="ddd.html" title="Nav 04">Nav 04</a>
<ul id="nav-04-dd">
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
</ul>
</li>
<li><a id="nav_05" href="ddd.html" title="Nav 05">Nav 05</a>
<ul id="nav-05-dd">
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
</ul>
</li>
</ul>
</div>
Hier dann der CSS Code:
Code:
ul#nav_top {
margin-left:2px;
margin:0em;
padding:0em;
}
ul#nav_top a:link,
ul#nav_top a:visited {
padding:0.40em 0 0 0;
/*width:20%;*/
text-align:center;
height:1.95em;
color:#fff;
text-decoration:none;
background-color:#D4003B;
cursor:pointer;
display:block;
float:left;
font-weight:bold;
font-size:0.80em;
letter-spacing:0em;
}
ul#nav_top li {
display:inline;
}
*.navigation_tp>ul#nav_top li a:hover#nav_01,
*.navigation_tp>ul#nav_top li a:hover#nav_02,
*.navigation_tp>ul#nav_top li a:hover#nav_03,
*.navigation_tp>ul#nav_top li a:hover#nav_04,
*.navigation_tp>ul#nav_top li a:hover#nav_05 {
background-color: transparent;
background-image:url(../images/navsub_bg_tp.png);
color:#D4003B;
}
*.navigation_tp>ul#nav_top li a#nav_top_active, *.navigation_tp>ul#nav_top li a#nav_top_active_01, *.navigation_tp>ul#nav_top li a#nav_top_active_02, *.navigation_tp>ul#nav_top li a#nav_top_active_03, *.navigation_tp>ul#nav_top li a#nav_top_active_04, *.navigation_tp>ul#nav_top li a#nav_top_active_05 {
background-color: transparent;
background-image:url(../images/navsub_bg_tp.png);
color:#D4003B;
}
/* Navigation */
ul#nav_top a#nav_01, *.navigation_tp>ul#nav_top li a#nav_top_active_01 {
width: 12%;
}
ul#nav_top a#nav_02, *.navigation_tp>ul#nav_top li a#nav_top_active_02 {
width: 33%;
}
ul#nav_top a#nav_03, *.navigation_tp>ul#nav_top li a#nav_top_active_03 {
width: 29%;
}
ul#nav_top a#nav_04, *.navigation_tp>ul#nav_top li a#nav_top_active_04 {
width: 18%;
}
ul#nav_top a#nav_05, *.navigation_tp>ul#nav_top li a#nav_top_active_05 {
width: 8%;
}
/* Navigation with DropDown */
ul#nav_top li ul {
display: none;
position: absolute;
top: 1.9em;
}
ul#nav_top li:hover ul {
display: block;
}
ul#nav_top li ul li {
width: 12em;
display: block;
}
ul#nav_top ul#nav-01-dd li a, ul#nav_top ul#nav-02-dd li a, ul#nav_top ul#nav-03-dd li a, ul#nav_top ul#nav-04-dd li a, ul#nav_top ul#nav-05-dd li a {
float: none;
background-color: transparent;
color: #414141;
text-align: left;
background-color: #e6e6e6;
border-top: 1px solid #fff;
padding-left: 1em;
}
ul#nav-02-dd {
left: 5.85em;
}
ul#nav-03-dd {
left: 21.9em;
}
ul#nav-04-dd {
left: 35.9em;
}
ul#nav-05-dd {
left: 36.45em;
}
ul#nav_top li ul#nav-01-dd, ul#nav_top li ul#nav-02-dd, ul#nav_top li ul#nav-03-dd, ul#nav_top li ul#nav-04-dd, ul#nav_top li ul#nav-05-dd {
display: none;
overflow: hidden;
}
ul#nav_top li:hover ul#nav-01-dd, ul#nav_top li:hover ul#nav-02-dd, ul#nav_top li:hover ul#nav-03-dd, ul#nav_top li:hover ul#nav-04-dd, ul#nav_top li:hover ul#nav-05-dd {
display: block;
overflow: visible;
}
Im Header habe ich dann noch folgendes eingefügt:
Code:
<!--[if lte IE 7]>
<style type="text/css" media="screen">#navi { behavior:url("filadmin/templates/css/csshover.htc"); }</style>
<![endif]-->
Die .htc Datei enthält allgemeinen Code, welcher nicht mit einzelnen Klassen zusammenhängt. Die Datei kann hier runtergeladen werden.
Woran liegt es das die Navigation im Firefox wie IE7 eingeblendet wird, im IE6 jedoch nicht?
Vielen Dank für Eure Hilfe
nic.
|