homepage Welcome to WebmasterWorld Guest from 50.16.165.62
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
width of pulldown menu columns
numnum




msg:4383194
 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




msg:4383249
 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




msg:4383295
 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved