Within DIV, Links Are Overlapping After Overflow To A New Line

[phenetic]

I'm still trying to get the whole jQuery concept down with CSS and such. I'm in the process of trying to make a simple navigation bar in which there's a hidden DIV. I would start with what looks like a start button, which when clicked would set off a toggle() to show or hide the hidden DIV above it, in which case, would make the menu bar appear from the top of the page. MY problem is that I'm trying to make the links set so that they will fill up horizonally, and then when there's no more room, they will fill up underneath making a new row within the DIV. When this happens, they go to a new row, but it's slightly sitting on top of the row above it, and not lined up. If someone can show me how to make this more organized I'd appreciate it, and I'd even be willing to settle for the alternate way of placing them, i.e. Having the links fill up a column and then when it hits the bottom of the div, start a new colum and fill that from top to bottom, etc. I've tried with and without URL's so far, so this is what I currently have:the HTML:\[code\] <div id="hidden-bar"> <ul id="hidden-bar"> <li><a href="http://stackoverflow.com/questions/7602279/##">Admin Menu</a></li> <li><a href="http://stackoverflow.com/questions/7602279/##">Home</a></li> <li><a href="http://stackoverflow.com/questions/7602279/##">Report Menu</a></li> <li><a href="http://stackoverflow.com/questions/7602279/##">Alt. Report Menu</a></li> <li><a href="http://stackoverflow.com/questions/7602279/##">Summary Menu</a></li> <li><a href="http://stackoverflow.com/questions/7602279/##">Comparison Menu</a></li> <li><a href="http://stackoverflow.com/questions/7602279/##">Editor Menu</a></li> <li><a href="http://stackoverflow.com/questions/7602279/##">Hourly Reports Menu</a></li> <li><a href="http://stackoverflow.com/questions/7602279/##">Constants Menu</a></li> </ul> </div> <div id="pull-down"></div>\[/code\]The CSS:\[code\] #hidden-bar { background-color: #323232; height: 110px; width: 100%; display: inline-block; overflow:auto; padding-top: 12px; color: #FFFFFF; clear:both; } #hidden-bar ul { list-style-type:none; display:block; } #hidden-bar li { display:inline; } #hidden-bar a { background-color:#AAAAAA; font:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#323232; display:inline; padding: 5px 10px 5px 10px; border: 3px solid #000000; margin-bottom: 4px; width: 105px; } #hidden-bar a:hover { background-color:#FEFADE } #pull-down { background-image:url('./images/pull_down.jpg'); background-repeat:no-repeat; height: 20px; }\[/code\]the jQuery works so far so I won't include that code, it's basically just an onclick() coded to run a toggle of id="hidden-bar".A few notes:[*]This is running within a .cfm file (I use coldfusion primarily, incase this will affect any judgment calls, but that's what I have to use for my job). I mention this incase anything runs into conflict, but so far, a lot of other jquery features have worked just fine so I doubt it being a cfm file is an issue.[*]I have all those different Style Sheets because I was just tinkering sometimes without UL/LI tags and sometimes with, so thats why there may be a few of them in there, like one for UL, one for LI, and one for "a" tags.My problem is that although there are a lot of tuts out there for these jquery nav bars, noone really goes into explaining how to make all the buttons separate and what to do incase of them overlapping each other, or don't explain how the functionality works in concept/english terms. Thanks in advance.