CSS Drop Down Menu IE6 & IE7 issues

[cyberpunkstudio]

Hi I am working on a website I just followed Chris’ tutorial on creating a http://css-tricks.com/simple-jquery-dropdowns/ CSS & jQuery drop down menu its working fine in all browsers except IE6 and IE7.

In IE7 there seems to be a horizontal scroll bar which is strange. In IE6 the same thing is happening but on the drop down menu links its inheriting some background style. When you hover over the link you get an orange background which I have set the background:none but its still inherting the style I dont know how to get rid of it.

You can take a look at the site here: [url="http://publishingcomics.cyberpunkstudio.net/"]http://publishingcomics.cyberpunkstudio.net/[/url]

The HTML:

Code:

• Blog
• About
  • Contact
  • Advertise
• Create Comic Books
• Store
  • Amazon Store (US)
  • Amazon Store (UK)
• Links

The CSS:

Code:

#menu_wrap {
height:45px;
background:url(images/menu-bk.gif) repeat-x scroll center top;
font-weight:bold;
font-size:1.5em;
font-family:Comic Sans MS,Comic Sans, cursive;
text-transform:uppercase;
}
div#menu {
width:973px;
min-height:1%;
margin:0 auto;
padding:0;
}
div#menu:after {
content:’.’;
display:block;
clear:both;
height:0;
visibility:hidden;
}
div#nav_wrap {
float:right;
height:39px;
padding:0;
margin:0 0 0 40px;
}

/* Level One */
ul.dropdown{
position:relative;
padding:3px 0;
z-index:1;
}
ul.dropdown li{
float: left;
zoom: 1;
padding:8px 0 6px 0;
background:transparent url(images/ul-li-a-bk.gif) no-repeat scroll right bottom;
}
ul.dropdown li a{
display: block;
padding: 0 10px;
color: #222;
}
ul.dropdown li.hover,
ul.dropdown li:hover{
position: relative;
color: black;
background: #F6C66B;
}
ul.dropdown li.hover a {
color: black;
}

/* Level Two */
ul.dropdown ul{
position:absolute;
top:100%;
right:0;
padding:10px 10px 6px 10px;
white-space:nowrap;
visibility:hidden;
text-align:right;
background:transparent url(images/ul-li-ul-li-bk.jpg) repeat-x scroll 0 0;
}
ul.dropdown ul li{
float: none;
display:block;
padding:0 0 5px 0;
font-weight: normal;
color: #000;
background:none;
}
ul.dropdown ul li a{
width: 100%;
display: inline-block; /* IE 6 & 7 Needs Inline Block */
margin:0;
padding:0;
font-weight:bold;
}
ul.dropdown li ul li:hover {
position: relative;
background:none !important;
}
ul.dropdown li ul li a:hover{
background:transparent !important;
}

Hope you can help me with the above.

Thanks

[Author]

Posts