标签套
标签，然后再给
标签设置样式。在被套的
标签设置平时状态为隐藏，再等鼠标移动到上一个
标签时，将被套的
标签显示（样式：overflow:hidden
）。
贴一段网上摘的纯CSS下拉菜单（二级）
利用float制作兼容ie6纯css下来菜单
*
{
margin:0
padding:0
}
ul
{
list-style:none
}
a:hover
{color:#555
}
.nav
{
float:left
overflow:hidden
text-align:center
font-size:14px
}
.nav
dd
{
float:left
width:300px
margin:-888px
-150px
0
0
}
.nav
dd
a
{
float:left
margin-top:888px
display:block
position:relative
background:#eee
width:150px
height:30px
line-height:30px
border-bottom:1px
solid
#fff
}
.nav
a:hover
{
margin-right:1px
background:#3cf
}
.nav
dd
ul
{
float:left
font-size:0
z-index:888
}
.nav
dd
li
a
{
clear:left
width:150px
margin-top:0
font-size:14px
}
.nav
dd
li
a:hover
{
margin-right:1px
}
首页
关于我们
公司简介
公司文化
企业荣誉
联系我们
新闻动态
国内新闻
国外新闻
产品展示
111
222
代码粘贴的太复杂；
先给你分析一下原理：二级菜单没有在没有hover属性的情况下是隐藏的所以需要display：none，当鼠标hover的时候二级菜单才会列出来，这是纯css可以实现的；
知道上面的原理之后，下面比较容易实现具体看例子：
HTML代码：
<ul><li><a href="">一级菜单</a></li>
<li><a href="">一级菜单</a>
<ul class="drop-ul">
<li ><a href="">二级菜单</a></li>
</ul>
</li>
</ul>
CSS代码：
ul li ul.drop-ul{ display: noneposition:relative }/*正常情况下隐藏*/ul li:hover ul.drop-ul li{display: block} /*当鼠标放上去二级菜单li 显示出来*/
/*这个时候你会发现二级菜单显示的位置可能不对可以使用position属性*/
ul li:hover ul.drop-ul li{position:absolute}
/*通过top right left 调整位置，根据实际情况调整背景颜色，字体颜色等，细节东西*/
此时可能会发现会二级菜单出现有那么一点点的生硬；没关系配合jquery实现缓慢展现效果
$(document).ready(function() {if($(window).width() > 768) {
$('ul li').hover(
function() {
$('ul', this).stop().slideDown(200)
},
function() {
$('ul', this).stop().slideUp(200)
}
)
}
})
注意不知道jquery的新手使用记住先加载Jquery.min.js文件，放在此段js前面；
