html - CSS 浮动文本栏

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;

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