菜单是<a>， 下拉菜单的容器是<div class="drop-down">...</div>
然后利用a:focus + .dropdown{ ... } 来实现。
要点1：CSS如何实现影响其他元素？
要点2： 如何做出（伪）点击触发？
基本用 a：focus，个人感觉自然一点。当然如果失去焦点，下拉菜单容器也会相应地隐藏。
# HTML BODY 部分代码：
<body>
<a href="#">Menu</a>
<div class="drop-down" id="drop-down">
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
</ul>
</div>
</body>
#HTML CSS 部分代码：
html, body{
font-family: Arial, Helvetica, sans-serif
font-size:16px
}
a{
display: block
width:50px
border:1px solid #333
background-color:white
padding:3px
text-align: center
text-decoration: none
}
a:hover{ background-color:#EEE}
a:focus + .drop-down{ display: inline-block}
.drop-down{
display: none
}
ul{
border:1px solid #333
display: inline-block
margin-top:1px
padding:0px
}
ul>li{
height: auto
padding: 3px 10px
border-bottom: 1px solid #333
text-align: center
vertical-align: middle
}
ul>li:last-child{
border:0px solid transparent
}
ul>li:hover{
background-color:#DDD
}
-----------------------------------------------------------------------
最后实现效果：
纯CSS的下拉菜单，此处理解的意思就是标签套
标签，然后再给
标签设置样式。在被套的
标签设置平时状态为隐藏，再等鼠标移动到上一个
标签时，将被套的
标签显示（样式：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
