Question

我有一个javascript菜单，我使用嵌套的UL元素生成。当我将嵌套的UL设置为使用具有相对位置的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元素并拉伸它们以填充空间。以某种方式设置位置：嵌套ul上的绝对值导致其内部链接出现问题。如果我设置position：relative并设置float：left

，我也会得到相同的行为

非常感谢浮动和绝对定位为什么会导致这个以及html结构或css代码中的可能解决方案。

非常感谢。

Answer 1

我在使用列表时学到的一件事，除了float:left之外的LI（以及清除列表类型边距和填充）从不设置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 ...
}

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

1 个答案: