How to get sub items to display properly in navigation bar?

[Samishii23]

http://hoa.ath.cx/~dm2/ ( My Home computer, might be slow )

My navigation bar is having float issues.
I want the sub Items to appear under the main items. But sadly, not the case right now.

.content-nav {
    display: table-cell;
    height: 100px;
    width: 700px;
    overflow: hidden;
    font-size: 23px;
    font-weight: bolder;
    font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; }
.content-nav ul { list-style: none; margin: 0 auto; }
.content-nav ul li {
    float: left;
    padding: 0 4px;
    border-bottom: 1px Solid #000;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px; }
.content-nav ul li a { color: #000; text-decoration: none; }
.content-nav ul li:hover { text-shadow: 1px 1px 2px #080; border-bottom-color: #088; }

I was using Position: Absolute and Margin adjustments up until just now, but I was reading up on proper CSS techniques, and am going to the style I am currently using. But I don't know how to stop the float from making the items below AND to the right of the main items...

Edit: Also the Blocks of color are just to see how the positioning is working for this new-to-me technique.

[Samishii23]

I was able to fix it using clear:both; after the main items, but I've read before its considered a hack. Anyway to fix this properly?

[drhowarddrfine]

The clear property is not a hack except if you use it to fix a problem with your markup that should be fixed by writing proper markup.

Showing the CSS doesn't do much good and your link times out.

[Samishii23]

http://samishii.site90.net/p/2/
This is the problem I am having, as I removed the clear from the sub navigation item <div>

[Bryan Cheung]

"Clear" is not a hack, youre using float's on the list-items of your main menu so youre bound to use clear.

If your first link wasn't timing out last night I would have posted to use "clear: both".

If you use float, and you want it to become "neutral" on the next line, you'll need to use clear.

Bit extra info: There is also the possibility to use clear on a br as in:

<br clear="all" />

But in the break you use "all" and in the CSS you use "both".

[drhowarddrfine]

Validate your html and css for those lists of errors.

The 'clear' attribute for br is deprecated. Use CSS.

Use 'clear:both' on the ul with the Equipment title in it.

[Bryan Cheung]

Btw: its like drhowarddrfine said, its deprecated for the br but even so, I would always recommend putting it in your CSS to keep the structure(HTML) and styling(CSS) separated.

[Samishii23]

I've run the validator for 2.1 and 3. Seems W3 still has issues with border-radius. I thought they had a specification for it. Guess not quite yet.
Oh well, guess I'll just use the clear and run with it. :)

Thanks for the help guys. :)