[SOLVED] breaking after each li

[justinede]

Hello,

 

I am having some issues with my css. here is my navigation ul.

 

    <div id="nav">
    	<ul class="menu">
            <li class="current"><a href="index.html">Home</a></li>|
            <li><a href="about.html">About</a></li> |
            <li><a href="news.html">News</a></li> |
            <li><a href="contact.html">Contact</a></li> 
        </ul>   
    </div>

 

and here is my css:

 

#nav          { max-width: 960px; background: #3B3B3B;
                            margin: 0 auto 0; text-align:left; color:#FFF }
				  
.menu		  { list-style: none; text-align:left; }

.menu li 	          { display:block; text-align:left; }

.menu li a             {color: #666; text-decoration:none; }

.menu li a:hover 	  { background: #cccccc; color: #fff; }

.menu li.current a  { background: #cccccc; color: #fff; }

 

You can see my site here: http://justinledelson.com/portfolio/mothers/site1/

 

As you can see, it is inserting a break after each li. I dont know how to fix this. Thanks for your help.

[Axeia]

First off, NEVER EVER put anything directly inside an ul that's not a <li>!

 

Second, lists are vertical by nature, add

.menu li { float: left; margin: 2px 20px; }

to take care of that.

 

You'll notice that it ruins makes other things go wrong, the easiest way to get around is by inserting a <div style="clear: both"></div> directly after the UL, there's a hard way to .

[justinede]

Thank you! It worked.