Question

CSS源代码中加入关于二级下拉菜单的代码

请问我的CSS中如何在源代码中增加关于二级下拉菜单的代码? 谢谢达人帮忙!

CSS:

ul.menu {float:right; margin:33px 0 0 0;}
ul.menu li {float:left; line-height:20px; margin:0px 0 0px 8px;}
ul.menu li a {font-size:14px; line-height:20px; color:#333333; display:inline; padding:7px 8px;}
ul.menu li a:hover, ul.menu li.current a {background:#F15A23; color:#fff; padding:7px 8px;}

HTML:

<nav>
<ul class="menu">
<li class="current"><a href="index.html">主页</a></li>
<li><a href="about.html">关于</a></li>
<li><a href="contacts.html">联系我们</a></li>
</ul>
</nav>

如下是示例图：

Answer 1

就这个CSS逻辑，详细代码自己研究一下吧

重点核心的用法就是这个

<style>
ul.menu li ul{display: none;} //一般时候都别显示二级菜单
ul.menu li:hover ul{display: block;} //滑鼠经过时，就显示二级菜单出来
</style>

<ul class="menu">
<li><a href="index.html">主页</a></li>
<li><a href="about.html">关于</a>
<ul>
<li><a href="#">link1</li>
<li><a href="#">link2</li>
<li><a href="#">link3</li>
</ul>
</li>
<li><a href="contacts.html">联系我们</a></li>
</ul>

想了解深入，可以看看百度的这篇：
http://wenku.baidu.com/link?url=6_9MuyTG3WlzT_4Unf2RpxSb6lZ30uJR1npqYfZiMvNMi1a5SXJ9BCLpcbOqzsSkGRCX8qk5y2PK0gz5akt1-SqflckAUoNSu87FNBrZu0S