I'll get together an IE6/7. I'm also changing it from display:none/block to a huge left margin/0 margin. It's a better way (you know that Ray but the OP doesn't)
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("nav").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>
<style type="text/css">
.top_menu {
padding: 0;
background: gray;
width:960px;
margin:0 auto;
border-bottom: 1.5em solid black
}
.top_menu:after {
content:"";
display: block;
clear: both;
}
.top_menu ul {
list-style: none inside;
margin: 0;
padding: 0;
float:right;
position: relative
}/*float hack for collapsing menu in IE*/
.top_menu li {
margin: 0;
float: left;
padding: .5em;
position: relative;
}
.top_menu li div {
padding-top: 0;
position: absolute;
left:50%;
top: 100%;
margin-left:-999em;
text-align: center;
/*background: orange*/
} /*submain*/
.top_menu li:hover div, .top_menu ul li.sfhover div{
margin-left:0
}
.top_menu a {
text-decoration: none
}
.top_menu ul li:hover, .top_menu ul li.sfhover {
background: pink
}
.top_menu .submain {
background: yellow;
font-size: 70%;
float: left
}
/*#rs .submain {
float:left;
margin-left:-4.75em
}
#prt .submain {
width:17em;
margin-left:-8.5em
}*/
.top_menu li div ul{position:relative;left:-50%;white-space:nowrap}
.top_menu li div ul li{display:inline-block;float:none;}
*+html .top_menu li div ul li{display:inline;}/*IE7 inline-block trigger*/
* html .top_menu li div ul li{display:inline;}/*IE6 inline-block trigger*/
</style>
</head>
<body>
<div class="top_menu">
<ul id="nav">
<li><a href="#">item</a></li>
<li><a href="#">item</a>
<div id="prt">
<ul class="submain">
<li><a href="#">submenu item that is longer</a></li>
<li><a href="#">stuff</a></li>
<li><a href="#">sub</a></li>
<li><a href="#">menu</a></li>
<li><a href="#">items</a></li>
</ul>
</div>
</li>
<li><a href="#">item</a>
<div id="rs">
<ul class="submain">
<li><a href="#">sub</a></li>
<li><a href="#">menu</a></li>
<li><a href="#">items</a></li>
</ul>
</div>
</li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>
</div
>
</body>
</html>
That's an IE6/7 version above.
Here is just an IE7 version if you aren't supporting IE7 (Ray gave one but the one I'm using uses a better hide/show technique
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.top_menu {
padding: 0;
background: gray;
width:960px;
margin:0 auto;
border-bottom: 1.5em solid black
}
.top_menu:after {
content:"";
display: block;
clear: both;
}
.top_menu ul {
list-style: none inside;
margin: 0;
padding: 0;
float:right;
position: relative
}/*float hack for collapsing menu in IE*/
.top_menu li {
margin: 0;
float: left;
padding: .5em;
position: relative;
}
.top_menu li div {
padding-top: 0;
position: absolute;
left:50%;
top: 100%;
margin-left:-999em;
text-align: center;
/*background: orange*/
} /*submain*/
.top_menu li:hover div{
margin-left:0
}
.top_menu a {
text-decoration: none
}
.top_menu ul li:hover{
background: pink
}
.top_menu .submain {
background: yellow;
font-size: 70%;
float: left
}
/*#rs .submain {
float:left;
margin-left:-4.75em
}
#prt .submain {
width:17em;
margin-left:-8.5em
}*/
.top_menu li div ul{position:relative;left:-50%;white-space:nowrap}
.top_menu li div ul li{display:inline-block;float:none;}
*+html .top_menu li div ul li{display:inline;}/*IE7 inline-block trigger*/
</style>
</head>
<body>
<div class="top_menu">
<ul id="nav">
<li><a href="#">item</a></li>
<li><a href="#">item</a>
<div id="prt">
<ul class="submain">
<li><a href="#">submenu item that is longer</a></li>
<li><a href="#">stuff</a></li>
<li><a href="#">sub</a></li>
<li><a href="#">menu</a></li>
<li><a href="#">items</a></li>
</ul>
</div>
</li>
<li><a href="#">item</a>
<div id="rs">
<ul class="submain">
<li><a href="#">sub</a></li>
<li><a href="#">menu</a></li>
<li><a href="#">items</a></li>
</ul>
</div>
</li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>
</div
>
</body>
</html>
. You can center floats without the width, but not absolute elements (unless you just guess with a certain left (or left margin) value 
Originally Posted by Paul O'B
Bookmarks