Как сделать выпадающий список?

Question

[Александр Коновалов]

Здравствуйте! Есть такой код:

<label class="control-label">Основное<span class="required-mark">*</span></label>
		<div class="controls">
            <ul class="unstyled span6">
            	<li><label class="checkbox"><input type="checkbox" name="d[1][558][]" value="1" data-num="1">Классический</label></li>
				<li><label class="checkbox"><input type="checkbox" name="d[1][558][]" value="2" data-num="2">Классический</label></li>
			</ul>
			<ul class="unstyled span6">
				<li><label class="checkbox"><input type="checkbox" name="d[1][558][]" value="4" data-num="3">Классический2</label></li>
				<li><label class="checkbox"><input type="checkbox" name="d[1][558][]" value="8" data-num="4">Классический2</label></li>
			</ul>					 		 
  		</div>

Нужно сделать выпадающий список. Наводишь на label "основное" и выпадает список с "Классический" и "Классический2".

Пробовал так:

ul.unstyled span6 {
    display: none;
    position: absolute;
    width: 125px;
    background: #3a313e;
    padding: 0;
}
ul.unstyled span6 > li {
    display: block;
    width: 125px;
    margin: 0;
}
ul.unstyled span6 > li > a {
    display: block;
    text-align: left;
}
ul.unstyled span6 > li:hover{
    display: block;
}

Но почему-то не работает. В чем ошибка?

Comments

[alex-1917]

откуда эта фигня? даже после того как приведете стили в порядок, выпадашка не будет правильно работать...
списки должны быть ВНУТРИ того блока, на который наводите - в данном случае label

Answer 1

[Ilya Loginov]

Для начала замените ul.unstyled span6 на ul.unstyled.span6 и:

ul.unstyled span6 > li:hover{
    display: block;
}

на

label.control-label:hover + .controls > ul.unstyled.span6{
      display: block;
}