css - 绝对或 float 的 UL 问题，链接不可点击

Question

我有一个使用嵌套 UL 元素生成的 javascript 菜单。当我将嵌套的 UL 设置为使用具有相对位置的 float ，或者使用没有 float 的绝对位置时，该嵌套 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 元素并拉伸(stretch)它们以填充空间。以某种方式设置 position:absolute 在嵌套的 ul 上会导致其中的链接出现问题。如果我设置 position:relative 并设置 float:left，我也可以获得相同的行为

希望澄清 float 和绝对定位导致此问题的原因以及 html 结构或 css 代码中的可能解决方案。

非常感谢。

Answer 1

我在使用列表时学到的一件事是，除了 LI 上的 float:left(以及清除列表类型边距和填充)之外，从来没有设置 LI 的样式。仅设置 anchor 样式并在 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 ...
}