li на той же строке, хотя отображение: указанный блок

Question

У меня есть такой код:

<div id="sidemenu">
<div id="sidemenuhdr">Beauty Courses</div>
<ul id="sidebarmenu">
<li><a href="#"><b>Professional Skincare & Facials</b></a></li>
<li><a href="#"><b>Spray Tanning</b></a></li>
<li><a href="#"><b>Eyelash Extensions</b></a></li>
<li><a href="electricalfacials.htm"><b>Electrical Facials</b></a></li>
<li><a href="holisticfacials.htm"><b>Holistic Facials</b></a></li>
<li><a href="#"><b>Diamond Peel Microdermabrasion</b></a></li>  
<li><a href="#"><b>Natural Facelift Massage</b></a></li>
</ul>
</div>

С помощью CSS вот так:

#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;}

Дело в том, что я получаю результат

• Профессиональная косметика и уход за лицом
• Спрей для загара
• Наращивание ресниц
• Электрические маски для лица Целостные маски для лица
• Микродермабразия с алмазной коркой
• Натуральный массаж лица

Он помещает электрические маски для лица и целостные маски в одну линию.

Есть идеи?

Answer 1

Измените #sidebarmenu li на это:

#sidebarmenu li{
clear:both;
}

Это бы сработало!

Answer 2

Короткий ответ - ввести:

#sidebarmenu li{
    float: left;
    clear: left;
}

Если вы просто удалите поплавок, вы не получите розовую полоску на дне.Это потому, что вы установили height: 20px на #sidebarmenu.

. Вы должны рассмотреть как можно меньше стилей и отделить стили от разметки (то есть не используйте <b> там, используйте font-weight.

Answer 3

a элементы display:block, а li элементы float: left. Что именно вы ожидаете?

Answer 4

Просто удалите #sidebarmenu li{float:left; }, если хотите добавить элемент сверху вниз