Forum Moderators: not2easy
Amended code for brevity, but tests fine:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
<style type="text/css">
#top_nav { white-space: nowrap; } /* does nothing, really */
#member_dd,#member_dd ul { list-style: none; white-space: nowrap; } /* float L, R, works, what about CENTERED? */
#member_dd li a { display: block; padding: 0px 6px 2px 6px; }
#member_dd li { float: left; white-space:nowrap; padding: 0px; }
#member_dd li ul li { width: 11em; text-align: left; border-bottom: 1px solid #E1DAF3; }
#member_dd li ul li a {
display: block;
width: 11em;
w\idth: 10em; /* Opera hack. ACK! */
padding: 0px 6px 2px 6px;
}
#member_dd li ul { position: absolute; width: 11em; left: -999em; padding: 0; margin: 0; }
#member_dd li:hover ul, #member_dd li.sfhover ul { left: auto; background-color: #F4F0FF; }
#member_dd li.sfhover ul a:hover { background-color: #dfdfff; }
</style>
</head>
<body>
<div id="main_content">
<div id="top_nav">
<ul id="member_dd">
<li><a href="#">JOIN</a></li>
<li><a href="#">HELP</a></li>
<li><a href="cgi/login.cgi">MEMBERS</a>
<ul>
<li><a href="#">Login</a></li>
<li><a href="#">Edit Profile</a></li>
<li><a href="#">Member Help</a></li>
<li><a href="#">Logout</a></li>
</ul>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("member_dd").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
</body>
</html>
* you are using float w/o an explicit width - that the browsers seem to work is a tribute to them not to the code.
* w/o a width it is difficult to center anything except text.
* without top_nav also being a float subsequent floats will float right/left on out.
* unfortunately there is no float: center; I truly wish there were.
#top_nav {float: left; width: 100%; background: #fdd; white-space: nowrap;
}
#member_dd, #member_dd ul {display: inline;/* re-IE double margin bug */ float: left; width: 50%; margin-left: 25%; background: #dfd; list-style: none; white-space: nowrap;
}
#member_dd li a {display: block; padding: 0px 6px 2px 6px;
}
#member_dd li {float: left; width: 30%; background: #ffd; white-space: nowrap; padding: 0px;}
* adjust your #member_dd, #member_dd ul width and left margin as desired.
* adjust #member_dd li width as required remembering that the padding on #member_dd li a is a factor.
* x-browser padding/margin difficulties might come into play.
Not a perfect solution but notes some problems and points to some work-arounds.
