View Full Version : horizontal menu w/vertical dropdowns

06-02-2006, 03:17 AM
What I would like my menu to look like:
- solid border on top and bottom
- first-level menu items horizontal and centered
- first-level menu items equally spaced as opposed to same widths
- second-level menu items vertical and on individual lines

What my menu actually looks like:

What's wrong:
- border not on top & bottom
- second level wrapping within the width of the container

This CSS is much more complex than what I usually do. Any help would be greatly appreciated.

06-02-2006, 04:50 AM
1) You need to clear the floated <li>s. (http://dynamicsitesolutions.com/css/layout_techniques/#clearing_floats)

2) Either make those not be floated

li ul li {
float: none;
or make them be 100% with of the sublist.

li ul li {
width: 100%;

06-02-2006, 08:43 AM
With the second level objects try setting display to block.


display: block;

For your top and bottom borders you can use a class.


LI.top {
border-top: 1px solid #FF0000;
LI.bottom {
border-bottom: 1px solid #FF0000;


<LI class="top"><A HREF="boulevard.html">Boulevard</A></LI>
<LI class="bottom"><A HREF="teacup.html">Teacups Backsplash</A></LI>

For example.

I didn't test either of these, but I'm pretty sure they should do the trick. If I'm wrong, its a step in the right direction. :D