Forum Moderators: not2easy
I've got a drop down menu that works for in firefox and ie 8 but in ie7 the drop down part does not align directly below it's parent. Instead it floats to the right. Any ideas how to fix this?
Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.sf-menu, .sf-menu ul {
padding: 0;
margin: 0;
list-style: none;
line-height:28px;
}
.sf-menu a {
display: block;
width: 8em;
}
.sf-menu li {
background-position: center;
float: left;
width: 8em;
text-align: center;
font-family: verdana;
font-size: 15pt;
font-weight: bold;
color: #FFFFFF;
}
.sf-menu li ul {
position: absolute;
background:#48A7CB;
width: 8em;
left: -999em;
}
.sf-menu li:hover ul{
left: auto;
}
.drop {
}
.sf-menu li.sfhover ul{
left: auto;
}
.top {
background-image: url('../images/backgrounds/menu_background.png');
background-repeat: repeat-x;
background-position: center;
height: 30px;
}
.top a:link, a:visited {
color: #FFFFFF;
text-decoration:none
}
.top:hover {
color: #FFFFFF;
background-image: url('../images/backgrounds/menu_selected.png');
background-repeat: repeat-x;
background-position: center;
}
.drop li {
border-style: solid;
border-width: 0px 0px 1px 0px;
border-color: #C0C0C0;
height: 30px;
}
.drop a:hover {
background-color: #00678E;
height:100%;
width:100%
}
</style>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Menu</title>
<script type="text/javascript" src="../main_js/jquery.js"></script>
<script type="text/javascript" src="js/hoverIntent.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
</head>
<body>
<br/>
<ul id="nav" class="sf-menu">
<li class="top"><a href="#">Today</a>
<ul class="drop">
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>
</li>
<li class="top"><a href="#">Tomorrow</a>
<ul class="drop">
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>
</li>
<li class="top"><a href="#">The Next Day</a></li>
</ul>
</body>
</html>
Try changing left:auto to left:0 in this rule:
.sf-menu li:hover ul{
left: auto;
}
(I think the left:auto was supposed to fix a bug in an older version of Opera, but it worked ok for me with 0)
I ended up making removing "align: center" from .sfmenu ul and made a new style,
#nav a {
text-align: center;
}
to center the links and set ".sf-menu li:hover ul" back to auto. This seems to work in all browsers.
I appreciate your help in identify the problem.
