绝对或浮动 UL 存在问题，链接不可点击

Question

我有一个使用嵌套 UL 元素生成的 javascript 菜单。当我将嵌套 UL 设置为使用带有相对位置的浮动，或者使用没有浮动的绝对位置时，该嵌套 ul 的 li 元素中的链接会以某种方式混乱起来。其中一些是可点击的，但不是全部。

下面是一些示例代码：

<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 设置为position:relative，链接会再次工作，但它会弄乱第一级 li 元素并拉伸它们以填充空间。不知何故，在嵌套 ul 上设置position:absolute会导致其内部链接出现问题。如果我设置position:relative和float:left，我也可以获得相同的行为

希望能清楚地了解为什么浮动和绝对定位会导致这种情况，以及在html结构或css代码中可能的解决方案。

非常感谢。

Answer 1

我在使用列表时学到的一件事是，除了 LI 上的 float:left（以及清除列表类型边距和填充）之外，绝不会设置 LI 的样式。仅设置锚点的样式并在 A 标记上使用 display:block。

一旦你开始设计 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 ...
}