...

View Full Version : Resolved ul inside another ul not aligning



nitzanb
11-19-2012, 10:29 AM
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

sunfighter
11-19-2012, 01:43 PM
li ul {
display: block;
position: absolute;
left: -40px; // ADD THIS
}


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

Excavator
11-19-2012, 02:18 PM
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;
}

nitzanb
11-19-2012, 08:44 PM
Thank you Excavator you solved it.

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


*solved



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum