Question

也许以前有人见过这个？将鼠标悬停在“First List”和“Second List”文本上时，文本会向左侧弹出几个像素。这只发生在Webkit浏览器中。在Linux和Mac上测试Chrome，在Mac上安装Safari，以及在Android浏览器中测试。这是代码。我也做了一个小提琴：http://jsfiddle.net/XzVLt

#navigation {
    line-height:30px;
    height:30px;
    clear:left;
    text-align:left;
    position:relative;
}

#navigation li {
    padding:0 5px;
    margin-left:-1px;
    width:100px;
    text-align:center;
    float:left;
    display:inline;
}

#navigation ul ul {
    display:block;
    position:absolute;
}

#navigation li ul {
    margin-left:-5px;
    padding-right:10px;
}

#navigation li ul li {
    margin-right:-2px;
    text-align:left;
    line-height:15px;
    padding:5px;
    clear:both;
    width:100%;
}

#navigation ul li {
    list-style:none;
}

#navigation ul li {
    float:left;
    list-style:none;
}

#navigation li ul {
    display:none;
}

#navigation li:hover ul {
    display:block;
}

#navigation a {
    font-size: 0.8em;
}

#navigation li li a {
    display:block;
    margin-left:10px;
    text-indent:-10px;
}


<div id="navigation">
<ul>
    <li>
        First list
        <ul>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
        </ul>
    </li>
    <li>
        Second list
        <ul>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
        </ul>
    </li>
</ul>
</div>

Answer 1

我猜测它与你的边距和填充有关，只要你从display：none更改下拉列表就会发挥作用：block

我使用suckerfish方法进行下拉;您也可以在方法中轻松实现此功能。只需更改下拉内容的相位，如下所示：

替换......

#navigation li ul {
    display:none;
}

#navigation li:hover ul {
    display:block;
}

...与......

#navigation li ul {
    position:absolute;
    left:-999em;
}

#navigation li:hover ul {
    left:auto;
}

Firefox和Safari中的快速测试 - 它运行得很好......你需要一些JS来创建一个替换li：hover伪的元素，否则它将无法在IE中运行。

详细了解此方法http://htmldog.com/articles/suckerfish/dropdowns/

为什么这个文本在Webkit中左侧弹出？

1 个答案: