Page is a not externally linkable
Paul_o_b - 9:46 pm on Nov 3, 2011 (gmt 0)
Hi,
All you have to do is float the top row without widths and then set the nested ul to the width that you want. It's pretty straight forward.
The basics are:
e.g.
ul li,ul li a{float:left}
ul li ul{width:150px}
ul li li, ul li li a{float:none;display:block}
Here's a full example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
#menu, #menu ul {
margin:0;
padding:0;
list-style:none;
}
#menu li {
float:left;
position:relative;
}
#menu li a {
float:left;
padding:0 20px;
height:36px;
line-height:36px;
text-decoration:none;
color:#000;
border:1px solid #000;
margin-right:-1px;
background:red;
}
#menu li ul {
position:absolute;
top:37px;
left:0;
margin-left:-999em;
width:150px
}
#menu li li, #menu li a {float:none;display:block }
#menu li li a{
height:auto;
line-height:normal;
padding:5px 10px;
background:blue;
color:#fff;
margin:0 0 -1px;
}
#menu li:hover ul { margin-left:0 }
#menu li:hover > a{background:#000;color:#fff}
</style>
</head>
<body>
<ul id="menu">
<li><a href="#">Menu 1</a>
<ul>
<li><a href="#">Sub 1</a></li>
<li><a href="#">Sub 2</a></li>
<li><a href="#">Sub 3</a></li>
</ul>
</li>
<li><a href="#">Menu 2 with a longer item</a>
<ul>
<li><a href="#">Sub 1</a></li>
<li><a href="#">Sub 2</a></li>
<li><a href="#">Sub 3</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a>
<ul>
<li><a href="#">Sub 1</a></li>
<li><a href="#">Sub 2</a></li>
<li><a href="#">Sub 3</a></li>
</ul>
</li>
</ul>
</body>
</html>
The above won't work in IE6 so google "suckerfish menus" for a js fix to make it work in IE6 but you will have to lose the child selector in the above rules and counteract the styles in the nested list.