li on same line although display:block specified - html

Question

I have some code like this:
<div id="sidemenu">
<div id="sidemenuhdr">Beauty Courses</div>
<ul id="sidebarmenu">
<li><b>Professional Skincare & Facials</b></li>
<li><b>Spray Tanning</b></li>
<li><b>Eyelash Extensions</b></li>
<li><b>Electrical Facials</b></li>
<li><b>Holistic Facials</b></li>
<li><b>Diamond Peel Microdermabrasion</b></li>
<li><b>Natural Facelift Massage</b></li>
</ul>
</div>
With CSS like this:
#sidemenu{
width:316px;
float:left;
margin: 5px 10px 5px 0;
background-color:#ffe2d6;
border: 2px solid #3b003b;
display:block;
}
#sidebarmenu{
width:250px;
display:block;
padding:0px;
margin:2px;
list-style:none;
height:20px;
position:relative;
z-index:500;
font-family:arial, verdana, sans-serif;
}
#sidebarmenu li{
float:left;
}
#sidebarmenu li a{
display:block;
height:20px;
line-height:20px;
background:none;
color:#000000;
text-decoration:none;
font-size:14px;
font-weight:bold;
padding:5px 5px 5px 5px;}
Thing is, the result I'm getting is
Professional Skincare & Facials
Spray Tanning
Eyelash Extensions
Electrical Facials Holistic Facials
Diamond Peel Microdermabrasion
Natural Facelift Massage
It is putting Electrical Facials and Holistic Facials on the same line.
Any ideas?

Answer 1

Change #sidebarmenu li to this:
#sidebarmenu li{
clear:both;
}
That would do the trick!

Answer 2

The a elements are display:block, but your li elements are float: left. What exactly do you expect?

Answer 3

The short answer is to put in:
#sidebarmenu li{
float: left;
clear: left;
}
If you just remove the float, you won't get the pink stretch to the bottom. That's because you've set height: 20px on #sidebarmenu.
You should consider having as few styles as possible and to separate styling from markup (i.e. don't use <b> there, use font-weight.

Answer 4

Just remove #sidebarmenu li{float:left; } if you want to li element from top to bottom