CSS Menu Problems In IE
Website: http://www.newsmuncher.com
CSS Code:
/*-- Menu --*/
.menu {
margin: 0;
width: 100%;
display: block;
z-index: 5;
}
.menu li
{
float: left;
position:relative;
border-right: 1px solid #1a397a;
border-left: 1px solid #355089;
}
.menu li:first-child {
border-left: 1px solid #1a397a;
}
.menu a {
padding: 10px;
text-decoration: none;
display: block;
color: #FFFFFF;
}
.menu a:hover {
background: #284581;
color: #FFFFFF;
}
.menu ul {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
background: #284581;
border: 1px solid #1A397A;
border-top: none;
border-radius: 0 0 3px 3px;
top: 35px;
left: -9999px;
position: absolute;
min-width: 125px;
}
.menu ul li {
float: none;
border: none;
border-bottom: 1px solid #1a397a;
border-top: 1px solid #355089;
background: #284581;
}
.menu ul a {
white-space: nowrap;
padding: 7px 10px !important;
}
.menu li a:hover ul, .menu li:hover ul {
left: -1px;
}
.menu li a:hover, .menu li:hover a {
background: #284581;
}
.menu li:hover ul li a:hover {
background: #304B86;
}
.menu ul li:first-child {
border-left: none;
}
.menu ul li:last-child {
border-bottom: none;
}
<div id="header" class="clearfix">
<div class="module clearfix">
<div id="logo" class="clearfix"> <a href="/"> <span>Newsmuncher.com</span></a></div>
<ul class="menu">
<li><a href="#">Home<![if !IE]></a><![endif]>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/help/">Help</a></li>
<li><a href="/terms/">Terms</a></li>
<li><a href="/privacy/">Privacy</a></li>
</ul>
<![if IE]></a><![endif]>
</li>
<li><a href="#">News</a></li>
</ul>
</div>
</div>View full post on Tycoon Talk
Menu, Problems
RSS Site Feed