horizontal menu w/vertical dropdowns

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:
www.vicesbyproxy.com/staging/exp_menu_vert.html

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.

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%;
}

With the second level objects try setting display to block.

CSS:
UL LI {
display: block;
}

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

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

HTML:
<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