Help with CSS Menu

[learn4life]

I have a CSS menu that I'm trying to get to display on 2 rows. I tried placing the data for each row in its own DIV (as indicated below) but I get a really big space in between. I also tried using line break but that didn’t work either.

Can someone tell me how to get the menu to be on 2 rows? Here are the codes and thanks in advance.

Here is the CSS.......

<style type="text/css">
#navcontainer { margin-left: 30px; }
/*Fat Erik's Pipelist*/
#navlist
{
list-style: none;
padding: 0;
margin: 0;
}
#navlist li
{
display: inline;
padding: 0;
margin: 0;
}
#navlist li:before { content: "¦ "; }
#navlist li:first-child:before { content: ""; }
/*IE workaround*/
/*All IE browsers*/
* html #navlist li
{
border-left: 1px solid black;
padding: 0 0.4em 0 0.4em;
margin: 0 0.4em 0 -0.4em;
font: normal 12px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
}
/*Win IE browsers - hide from Mac IE\*/
* html #navlist { height: 1%; }
* html #navlist li
{
display: block;
float: left;
}
/*End hide*/
/*Mac IE 5*/
* html #navlist li:first-child { border-left: 0; }
</style>

Here is the HTML.....

<div id="navcontainer" style="width: 900; height: 175">
<ul id="navlist">
<li id="active"><a href="#" id="current">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
</ul>
</div>
<div id="navcontainer" style="width: 900; height: 137">
<ul id="navlist">
<li id="active"><a href="#" id="current">Menu 5</a></li>
<li><a href="#">Menu 6</a></li>
<li><a href="#">Menu 7</a></li>
<li><a href="#">Menu 8</a></li>
</ul>
</div>

[Fotiman]

First, you have an id value assigned more than one time. ID's must be unique. You might be able to get the effect you want by changing those to classes. You'll need to modify your styles to match.

<div class="navcontainer" style="width: 900; height: 175">
<ul class="navlist">
<li id="active"><a href="#" id="current">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
</ul>
</div>
<div class="navcontainer" style="width: 900; height: 137">
<ul class="navlist">
<li><a href="#">Menu 5</a></li>
<li><a href="#">Menu 6</a></li>
<li><a href="#">Menu 7</a></li>
<li><a href="#">Menu 8</a></li>
</ul>
</div>

And if you have too much spacing between the rows, just be sure to set your margins and padding for navcontainer. Try this to start, then tweak as needed.

.navcontainer { margin: 0; padding: 0; }

Hope that helps.