HTML & CSS Horizontal menu with items on left & right
- by Fabian Vilers
Hi all,
I'm building an horizontal menu in html+css. The current result is fine, except I want to have some items on the left, and others on the right. I couldn't find usefull result on Google with such common keywords so I'm asking on SO.
Here's my code so far:
#menu
{
background-color: #383838;
height: 65px;
margin-bottom: 20px;
}
#menu ul li
{
float: left;
}
<div id="menu">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
I'd like to have Link 3 on the right, so the space between link 2 and 3 should be filled at maximum. I don't want a filler <li> tag, but instead apply a class to the last <li> on the left, or the first <li> on the right. Don't want to adjust the width as I've a :hover background color changing effet on the links. I suppose margin or padding should do the trick but I can't manage to find how.
Any clue?
Thanks in advance,
Fabian
