html - CSS float 文本栏

Question

我有这个 HTML 代码:

<div id="navbar">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Forum</a></li>
        <li><a href="#">Contact Us</a></li>
    </ul>
</div>

CSS:

#navbar { position: relative; margin: 3px; }
#navbar ul { padding: 0; margin: auto; background: #f0f0f0 url(../images/1px.png) repeat-x 0 -441px; padding: 4px 0 4px 0; }
#navbar li { display: inline; margin-right: 80px; }
#navbar li a { font-family: EqualSansDemo; font-size: 1.6em; color: #555555; text-shadow: 1px 1px 0px #fff; }   
#navbar li a:hover { color: #0071e4; } 

它会是这样的:

我需要做的就是:

我真的尝试了很多东西，浪费了三个小时都没有成功......我认为这很容易，但我不擅长 CSS。有什么想法吗？

Answer 1

你想要的是一个 Suckerfish Dropdown 你必须做的是:

<ul>
    <li>Home</li>
    <li>Forum
        <ul class="children">
            <li>Some link</li>
            <li>Another link</li>
        </ul>
    </li>
    <li>Contact Us</li>
</ul>

当然，默认情况下不应显示子项，因此请在您的 CSS 中添加:

.children{display:none;}

当论坛元素悬停时，您应该显示它们，所以:

li:hover .children{display:block;}

当然，您需要添加一些位置样式，以便它们很好地位于论坛元素下方并且不会破坏您的设计。因此，请确保使用 position:absolute;

将子类从流程中移出

您可以在此处阅读有关 suckerfish 下拉菜单的更多信息:http://alistapart.com/article/dropdowns