CSS 导航显示

Question

我是一个相对新手，我在遵循 css 进行导航时遇到问题。我需要做两件事：1） 内联运行我的子菜单2）隐藏我的子导航，并内联显示。

这是测试站点： http://gbetza.mydomain.com/webservice2/test/Basso56/test/home.html

这是 CSS：http://gbetza.mydomain.com/webservice2/test/Basso56/test/css/style%20-%20Copy.css

我无法理解我需要调整哪个课程以及如何调整。

谢谢

Answer 1

从我的类似答案中复制 + 粘贴。

我已经创建了一个非常简单的实现。它是准系统，因此您可以真正轻松地了解基本概念。

在这里的小提琴中：http://jsfiddle.net/WS3QQ/2/

HTML - 注意子菜单是如何嵌套的

<div id="nav">
<ul>
    <li><a href="#">Top Menu</a>
        <ul>
            <li><a href="#">Sub-Menu</a></li>
            <li><a href="#">Sub-Menu</a></li>
            <li><a href="#">Sub-Menu</a></li>
        </ul>       
    </li>
    <li><a href="#">Top Menu</a></li>
    <li><a href="#">Top Menu</a></li>
    <li><a href="#">Top Menu</a></li>
</ul>
</div>

CSS - 注意如何轻松定位子菜单（#nav li li）。默认情况下，子菜单 li 是隐藏的（显示：无）。当将鼠标悬停在 li 上时，将显示子菜单 li（display：block）。

#nav ul { list-style-type: none; margin: 0; padding: 0; }
#nav li { float: left; } 
#nav li li { clear: left; display: none; }
#nav li:hover li { display: block; }
#nav li:hover a { background: #111; }
#nav li a { background: #333; padding: 10px; display: block; color: #FFF; font-weight: bold; text-decoration: none; }
#nav li a:hover { background: #3914AF; }