Hej Alle sammen
Ved godt man ikke bør få ting til at virke i IE6 mere, men en stor del af dem der ser min side bruger det åbenbart.
Jeg har lavet en css menu med sub-menu punkter.
Det virker som det skal i FF og IE7, men i IE6, viser den sub-menuen inde i selve menu-linjen, i stedet for at vise dem under hoved-menu punktet.
Har søgt på en masse forskellige løsninger, men kan ikke finde en der virker.
Her er min html menu:
<div id="menu">
<ul id="nav">
<li class="current" style="float:left; width:111px; border-right:1px solid #4a4a4a; text-align:center; background-image:url(../image/menu-hover.jpg); background-repeat: repeat-x;"> <!--background-color:#141416;-->
<a href="#" style="color:#dedede;">
HOME
</a>
</li>
<li class="current" style="float:left; width:142px; border-right:1px solid #4a4a4a; text-align:center; background-image:url(../image/menu-hover.jpg); background-repeat: repeat-x;">
<a href="#" style="color:#dedede;">
ABOUT
</a>
<ul class="sub" style="width:142px; margin-left:-1px;">
<li class="sub" style="float:left; width:142px; text-align:center; border-top:1px solid #666;">
<a href="#">
The Compnay
</a>
</li>
<li class="sub1" style="float:left; z-index:2; width:142px; text-align:center; font-size:10px; border-width:0px 1px 1px 1px; border-style:solid; border-color:#666; background-image:url(../image/menu-hover.jpg); background-repeat:repeat-x;">
<a href="#" style="color:#dedede;">
About us
</a>
</li>
</ul>
</li>
<li class="current" style="float:left; width:149px; border-right:1px solid #4a4a4a; text-align:center; background-image:url(../image/menu-hover.jpg); background-repeat: repeat-x;"> <!--background-color:#141416;-->
<a href="#" style="color:#dedede;">
COLLECTION
</a>
<ul class="sub" style="width:149px; margin-left:-1px;">
<li class="sub" style="float:left; width:149px; text-align:center; border-top:1px solid #666;">
<a href="#">
Women
</a>
</li>
<li class="sub" style="float:left; width:149px; text-align:center; border-top:0px solid #666;">
<a href="#">
Text
</a>
</li>
<li class="sub" style="float:left; width:149px; text-align:center; border-top:0px solid #666;">
<a href="#">
Text
</a>
</li>
<li class="sub" style="float:left; width:149px; text-align:center; border-top:0px solid #666;">
<a href="#">
Text
</a>
</li>
</ul>
</li>
<li class="current" style="float:left; width:134px; border-right:1px solid #4a4a4a; text-align:center; background-image:url(../image/menu-hover.jpg); background-repeat: repeat-x;">
<a href="#" style="color:#dedede;">
CONTACT
</a>
</li>
</ul>
</div>
Og css'en er her:
#menu {
float: left;
height: 30px;
width: 950px;
background-image: url(../../image/menu.jpg);
/*background-color:#d0d0d0;*/
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
z-index: 1;
}
ul#nav {
list-style: none;
padding: 0;
margin: 0;
}
ul#nav li a {
display: block;
font-weight: bold;
padding:8px 0 0 0 ;
background:#f9f9f9;
height:22px;
}
ul#nav li a:hover{
background-color:#888;
color:#fff;
}
ul#nav li {
float: left;
position: relative;
text-align: center;
border:0px solid #ccc;
list-style:none;
}
ul#nav li.current a{
background:none;
/*border-left:1px solid #505050;
border-left:1px solid #505050;*/
}
ul#nav li.sub a{
background:#fff;
filter:alpha(opacity=90);
-moz-opacity:.90;
opacity:.90;
color:#000;
font-size:10px;
}
ul#nav li.current a:hover{
background-image: url(../../image/menu-hover.jpg);
background-repeat: repeat-x;
color:#dedede;
}
li ul {
display: none;
position: absolute;
width:100px;
top: 0;
left: 0;
font-weight: normal;
padding:0 0 0 0;
}
li:hover ul, li.over ul {
display: block;
}
ul#nav li ul .sub{
border-left:1px solid #666;
border-right:1px solid #666;
z-index: 2;
}
ul#nav li ul.sub li{
border-bottom:1px solid #666;
}
ul#nav li ul.sub li a{
font-weight: bold;
color:#000;
}
ul#nav li ul.sub li a:hover{
font-weight: bold;
color:#fff;
display: block;
}
li>ul {
top: auto;
left: auto;
}
li:hover ul, li.over ul {
display: block;
}
Indlæg senest redigeret d. 03.02.2011 09:24 af Bruger #15083