Проблемы с UL в абсолюте или с плавающей точкой, ссылки не кликабельны

Question

У меня есть меню JavaScript, которое я создал, используя вложенные элементы UL.Когда я устанавливаю для вложенного UL либо использование float с относительным положением, либо абсолютное положение без float, ссылки в элементах li этого вложенного ul как-то путаются.Некоторые из них будут активными, но не все.

Вот пример кода:

<ul class="top">
  <li class="first">
    <a href="somewhere" class="firstlink">The Link</a>
    <ul class="nested" id="menu_about">
        <li class="second"><a href="somewhere" class="secondlink">The Link</a></li>
        <li class="second"><a href="somewhere" class="secondlink">The Link</a></li>
        <li class="second"><a href="somewhere" class="secondlink">The Link</a></li>
        <li class="second"><a href="somewhere" class="secondlink">The Link</a></li>
    </ul>
  </li>
</ul>

CSS

#main_nav ul.top {
    list-style: none;
    padding: 0;
    margin: 0;
    top: 5px;
    position: relative;
}

#main_nav ul.top li.first {
    margin-bottom: .5em;
    padding: 0px;
    text-align: right;
    position: relative;
}

#main_nav ul.top li.first a.firstlink, #main_nav ul.top li.first a.firstlinkactive {
    display: block;
    width: 100%;
    line-height: 25px;
    background-image: url(/images/gray_back.png);
    padding-right: 10px;
    width: 140px;
}

#main_nav ul.top li.first a.firstlink:hover, #main_nav ul.top li.first a.firstlinkactive:hover {
    background-image: url(/images/red_back.png);
}

#main_nav ul.top li.first ul {
    left: 150px;
    text-align: left;
    background-image: url(/images/red_back.png);
    position: absolute;
    list-style: none;
    margin: 0;
    padding: 5px 10px;
    top: 0;
    overflow: auto;
}

#main_nav ul.top li.first ul.nested_hidden {
    visibility: hidden;
}

#main_nav ul, #main_nav ul li, #main_nav ul li ul, #main_nav ul li ul li, #main_nav ul li ul li a {
    position: relative;
    z-index: 1000;
}

Если я установлю ul.nested в положение: относительный ссылки снова работают, но он портит элементы li первого уровня и растягивает их, чтобы заполнить пространство.Каким-то образом установка положения: absolute на вложенном ul вызывает проблемы со ссылками внутри него.Я также могу получить то же поведение, если я установлю position: относительный и установить float: left

Буду признателен за некоторую ясность о том, почему float и абсолютное позиционирование вызывают это и возможное решение либо в html-структурировании, либо в css-коде.

Большое спасибо.

Answer 1

Одна вещь, которую я узнал при использовании списков, кроме float:left в LI (и очистка полей и отступов типа списка), никогда не стилизует LI. Используйте только стиль якоря и используйте display:block для тега A.

Как только вы начнете стилизовать, комбинация LI и A развалится, если вы не будете осторожны.

Основная схема такова:

ul, li {
   padding:0;
   margin:0;
   list-style-typwe:none
}

ul {
   position: relative;
}

ul ul {
   position:absolute;
   top:___;
   left:___;
}

li a {
   display:block;
   ...your other styling ...
}