Hello Im making a simple Css navigation
I can't figure out why buttons aren't positioned correctly


<div id="wrap">
<div id="menu">
<ul>
<li><a href="#1">Welcome</a></li>
<li><a href="#2">Nav</a>
<ul>
<li><a href="">Something</a></li>
<li><a href="">Another</a></li>
<li><a href="">Yippie</a></li>
<li><a href="">Yay</a></li>
</ul>
</li>
<li><a href="#3">Join</a></li>
<li><a href="#4">Relax</a></li>
</ul>
</div>
</div>

#wrap { margin: auto; width:800px;}
#menu { width:800px; height:50px; margin:0; padding:0; }
#menu ul {
width:800px;
height:50px;
list-style:none;
}

#menu ul li {
width:195px;

float: left;
text-align:center;
background-color:grey;
height:50px;
display:block;
position:relative;

}

#menu ul li ul li {
float: none;

}

#menu ul li a {
text-decoration:none;
padding: 15px;
display:block;
border:1px solid white;
}

#menu ul li:hover {
background-color:white;
}
li ul {
display: block;
position: absolute;
}


http://i50.tinypic.com/5mleux.png

li ul {
display: block;
position: absolute;
left: -40px; // ADD THIS
}


P.S. display: block; This is the default so it is not needed.

Good morning nitzanb,
That's the default 40px padding on the ul that's causing that.
Remove it with this bit highlighted in red - li ul {
display: block;
padding: 0;
position: absolute;
}

Thank you Excavator you solved it.

sunfighter thank you too, havnt tried it but you're kind.


*solved