I am experiencing an issue with my drop-down menu in ie6. The subitems menus are shifted to the right, rendering the menu useless.
Here is the HTML code:
<div id="navigation">
<a href="<?php echo base_url();?>" class="single">Home</a>
<div class="menu_item">Company
<div class="submenu">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>
</div>
<div class="menu_item">Services
<div class="submenu">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>
</div>
</div>
This is the CSS code:
#navigation{
width: 905px;
height: 30px;
margin: 0px auto;
padding-left: 150px;
}
#navigation img{ float: left; vertical-align: top;}
.single {
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #bfcee3;
text-decoration: none;
padding-left: 10px; padding-right: 10px;
margin-top: 20px;
}
.single:hover{color: #fff;}
.menu_item{
padding-left: 10px; padding-right: 10px;
margin-top: 20px;
float: left;
height: 35px;
text-indent: 8px;
overflow: hidden;
position: relative;
z-index: 10000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #bfcee3;
text-decoration: none;
}
.submenu{
position: absolute;
top: 15px;
}
.submenu a{
display: block;
width: 100px;
height: 15px;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
color: #bfcee3;
text-decoration: none;
}
.submenu a:hover{
/*background: #181818;*/
color: #fff;
}
.menu_item:hover{
overflow: visible;
/*background: #e0e0e0;
color: #181818;*/
}
This is the jQuery code:
$(".submenu").slideUp(100, function() {
$(".menu_item").css({overflow:'visible'})
});
$(".submenu").css({display:'none'});
$(".menu_item").hover(function(){
$(this).stop().animate({
marginTop: "0px"
}, 300, function() {
$(".submenu", this).slideDown(300);
});
}, function() {
$(".submenu", this).slideUp(300, function () {
$(this).parent().stop().animate({
marginTop: "20px"
}, 300);
});
}
);