使用HTML和CSS制作下拉菜单的方法如下：
1、编写带有div导航的html代码：
2、使用class=“nav”属性的‘div’标签作为菜单的容器。在截图中，在图示的HTML代码中，一个简单的无序列表（ul）来表示主菜单项。
3、在主菜单区域中添加链接。在本步骤中，在无序列表（ul）每一项上添加链接。
4、在“关于我们（About Us）”下方LI标签内添加一个无序列表，它代表其子菜单的链接。
5、制作导航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
}
-----------------------------------------------------------------------
最后实现效果：
设置子菜单项的样式分为3步 1、首先对每个子菜单项，也就是dd元素进行常规设置，包括内外边距清零，设置文字颜色等。/* 设置菜单项的dd */
#menu li dd {margin:0padding:0color: #fff
} 2、为了使最后一个dd的下端有一条分割线，我们设置它为1px的红色下边框，这就使之与上边框的红色分割线想对应了，也告诉浏览者这是一块可以点击的区域。
#menu li dd.last {
border-bottom:1px solid #b00
} 上面的代码也新增了一个last的类，因此我们必须在对应的HTML代码中最后一个dd指定class="last"。
CSS高级教程 3、设置子菜单的链接的样式
#menu li dd a, #menu li dd a:visited {
display:block
color:#FFF
text-decoration:none
padding:5px 20px
background: #0000FF}此时，我们在浏览器就可以看到下拉菜单的样式已经可以显示了。 二、设置鼠标经过时的响应
最后一条规则，让鼠标滑过有下拉项的时候，显示下拉菜单。当然我们实际设置的是：如果某一个下拉菜单的父级元素（一级菜单项）被鼠标滑过，那么就让该下拉菜单可以被看见：
#menu li dd { visibility: visible}
background: #0000FF}最后我们就可以运行整个文件实现效果了，建站教程网建议大家一起跟着步骤一步一步的做哦。
