Question

所以我有你的基本HTML菜单结构：

<div id="page">

    <h1>Home</h1>
    <ul id="nav">
      <li><a href="http://example.com/">Home</a>
        <ul>
            <li><a href="http://example.com/">Nested Item</a></li>
            <li><a href="http://example.com/">Nested Item</a></li>
        </ul>
      </li>
      <li><a href="http://example.com/">About Us</a>
        <ul>
            <li><a href="http://example.com/">Nested Item</a></li>
            <li><a href="http://example.com/">Nested Item</a></li>
        </ul>
      </li>
      <li><a href="http://example.com/">Our Products</a>
        <ul>
            <li><a href="http://example.com/">Nested Item</a></li>
            <li><a href="http://example.com/">Nested Item</a></li>
        </ul>
      </li>
      <li><a href="http://example.com/">Contact Us</a>
        <ul>
            <li><a href="http://example.com/">Nested Item</a></li>
            <li><a href="http://example.com/">Nested Item</a></li>
        </ul>
      </li>
    </ul>

    <h2>Stuff</h2>
    <p>
    Some text</p>
    <p>
    Some text.</p>

</div>

这是菜单css：

#nav, #nav ul{
    padding: 0;
    margin: 0;
    list-style: none;
}

#nav a{
    display: block;
    border:1px solid cyan;
}

#nav li {
    border:1px solid;
    float: left;
}

#nav li ul {
/* note that this method hides the sub-items but they remain available to screen readers. this is important! you should never use display: none; as that removes the sub-items entirely. */
    position:absolute;
    width: 10em;
    left: -999em;
}

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

我的问题是关于最后一条CSS规则：

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

“left：auto”如何将“left：-999em”的负面位置恢复正常并完美下拉？

Out put example。

Answer 1

原来的“left：-999em”只是通过将它移动到远离页面无法看到的地方来“隐藏”'ul'。所有“left：auto”属性正在将'ul'重置为默认位置，可以看到它。

见这里： http://www.w3schools.com/cssref/pr_pos_left.asp

它的工作原理是因为“position：absolute”标签使得'ul'可以显示在其他内容之上，当你将鼠标悬停在'li'上时，它会将“left”值设置为默认值。

见这里 http://www.w3schools.com/cssref/pr_class_position.asp

使用左侧绝对定位的CSS下拉菜单：自动位置

1 个答案: