Having a problem with CSS Menu's in IE. It's my first shot at CSS Menus, so of course there's going to be mishaps. :) It is supposed to display the list items below the list header, but instead it is display it to the right. It shows up perfectly in Firefox, but (of course) not in IE.
What happens (IE): http://vvcap.net/db/7Ti_aj74IaQjwyX7rk43.htp
But it's supposed to display the list items directly below the header of "Marketing."
Code:
ul
{
background:orange;
height:25px;
list-style:none;
margin:0 auto;
}
li{
float:left;
padding:0px;
}
li a{
background: url("images/seperator.gif") bottom left no-repeat;
color:white;
display:block;
font-weight:normal;
line-height:25px;
text-align:center;
text-decoration:none;
}
li a:hover, ul li:hover a{
background: #2580a2 url('images/seperator.gif') bottom left no-repeat;
z-index: 1;
color:#FFFFFF;
text-decoration:none;
}
li ul{
background:#333333;
display:none;
height:auto;
position:absolute;
width:156px;
z-index:500;
}
li:hover ul{
display:block;
z-index:1;
}
li li {
background:url('images/sub_sep.gif') bottom left no-repeat;
display:block;
width:156px;
}
li:hover li a{
background:none;
}
li ul a{
display:block;
height:25px;
font-size:12px;
font-style:normal;
padding:0px 10px 0px 15px;
text-align:left;
}
li ul a:hover, li ul li:hover a{
background:#2580a2 url('images/hover_sub.gif') center left no-repeat;
color:#ffffff;
text-decoration:none;
width:131px;
}