navigation problem with IE6
Hi.
I am new to this forum. But i have read some articles which has been already published relating to my problems, and i tried , nothing worked. I have created horizontal navigation bar then I used Jquery for subnavigation , It works absolutely fine with IE7, firefox, even with google chrome. but it doesn't work on IE6 . here is my code:
For html:
<div id="nav"><div class="inner">
<ul>
<li><a href="index.html" class="current"><span class="link">home</span></a>
<ul>
<li><a href="">some other link</a></li>
<li><a href=""> link example</a></li>
<li><a href="">add anything</a></li>
<li><a href="">this will hopefully work</a></li>
</ul>
</li>
<li><a href="about.html"><span class="link">about</span></a></li>
<li><a href="portfolio.html"><span class="link">portfolio</span></a></li>
<li><a href="blog.html"><span class="link">Services</span></a>
<ul>
<li><a href="">Building</a></li>
<li><a href="">Roofing</a></li>
<li><a href="">Commercial</a></li>
</ul>
</li>
<li><a href="contact.html"><span class="link">contact</span></a></li>
</ul>
</div></div>
FOr css:
/* === Nav === */
#nav{
background:url(images/navbg-repeat.jpg) repeat-x top;
height:56px;
width:100%;
margin:2px 0;
position:relative;z-index:999;
}
#nav .inner{
width:100%;z-index:999;
height:56px;
background:url(images/navbg-middle.jpg) top center no-repeat;
}
#nav ul {
font-size:18px;
padding: 5px 0 0 30px;
margin: 7px 0;
list-style: none;
float: left;
text-shadow:1px 1px white;
z-index:999;
}
#nav ul li{
display:inline;
float:left;
z-index:100;
}
#nav ul li a:link, #nav ul li a:visited{
display:inline;
color:#525252;
display:block;
text-decoration:none;
height:44px;
}
#nav ul li a:hover{
display:inline;
color:#000;
background:url(images/bgright.jpg) no-repeat top right ;
display:block;
text-decoration:none;
height:44px;
}
#nav ul li a.current{
background:url(images/bgright.jpg) no-repeat top right ;
height:44px;
}
#nav ul li a.active{
background:url(images/bgright.jpg) no-repeat top right ;
height:44px;
}
#nav ul li a.current span.link,#nav ul li a.active span.link, #nav ul li a:hover span.link {
background: url(images/bgleft.jpg) no-repeat top left;
}
#nav ul li a span.link {
margin: 0 18px 0 0px;
padding: 12px 8px 14px 18px;
position: relative; /*To fix IE6 problem (not displaying)*/
float:left;
cursor:pointer;
}
/* === Dropdown Nav === */
#nav ul ul {
position:absolute;
display:none;
top:37px;
z-index:9999;
background:#d0d2d3;
padding:5px;
border:1px solid #a2a2a2;
width:170px;
}
ul#nav ul ul li{
background:none;
padding:0;
margin:0;
z-index:999;
}
#nav ul li ul li{
background:none;
border-top:1px solid #fff;
border-bottom:1px solid #e4e4e4;
z-index:999;
padding:0;margin:0
}
#nav ul li ul a:link, #nav ul li ul a:visited{
display:block;
padding:10px 0 8px 10px;
width:160px;
font-size:12px;
color:#333;
text-decoration:none;
font-weight:normal;
background:#fff;
float:left;
margin:0;z-index:999;
height:16px;
}
#nav ul li ul a:hover{
display:block;
width:160px;
text-decoration:underline;
font-weight:normal;
font-size:12px;
float:left;z-index:999;
background:url(images/nav-submenu.jpg) repeat-x bottom #fff;
}
#nav ul ul ul{
top:auto;z-index:999;
}
#nav ul li ul ul {
left:146px;
margin:0px 0 0 10px;
z-index:9999;
}
#nav ul li{
position:relative;
}
in the IE6 the main nav bar is not showing as horizontal , it breaks the link and is showing as drop down menu. Can anyone help? It is not on the web that i can show you. But if anyone likes to help please email me I can send u the screenshot. thanks