怎样使用css制作下拉菜单
菜单是<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;
}
-----------------------------------------------------------------------
最后实现效果：
