width of pulldown menu columns

Forum Moderators: not2easy

Message Too Old, No Replies

width of pulldown menu columns

numnum

7:55 pm on Nov 3, 2011 (gmt 0)

I've created a drop-down (or pull-down) menu employing an HTML unordered list (UL) and CSS. It's easy enough to set a uniform width for all columns. But what I want is for the top row in each column (the one you see without hovering) to be narrower than the rows below it (the list items that appear when you hover) AND for all rows below the top row in each column to be uniform in width (rather than ragged right).

You'll find a perfect example of what I want to accomplish at the Pubcom site [pubcon.com ]. Notice when you hover over the horizontal menu bar at the top of any page that the rows below each category extend to the right yet are all the same width.

How do I accomplish this using only CSS?

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.

numnum

12:34 am on Nov 4, 2011 (gmt 0)

Okay. I see what my problem was: I wasn't nesting lists (one UL within another). I'll copy your example as a template and redo my menu. Thanks very much.