例如这种，当然这只是一个例子，其他的也行，如果可以，请简要说明一下用到哪些技能点和原理。
回复内容：几个下拉菜单display:none
按钮 :hover 给下拉菜单display:block
也许可以无脚本，纯html和 css 实现的多级下拉菜单，在非 ie 内核浏览器和 ie8+ 表现完美。
主体使用ul>li>ul>li>......嵌套定义多级。
http-equiv=content-type content=text/html; charset=utf-8> 纯 css 多级菜单 .menu{} .menu ul,.menu li{margin:0; padding:0;list-style:none outside;} .menu>ul{overflow:auto; display:inline-block;} .menu a,.menu span{ cursor:default; height:30px; line-height:30px; padding:0 5px; display:block; text-overflow:ellipsis; overflow:hidden; text-decoration:none; color:menutext;} .menu a:hover,.menu span:hover,.menu li:hover>a,.menu li:hover>span{color:highlighttext;} .menu li:hover{background-color:highlight;} .menu li:hover>ul{display:block;} .menu>ul>li{float:left;} .menu>ul>li ul{display:none;float:left; background-color:#fff; border:1px solid highlight; position:absolute;} .menu>ul>li li{padding-left:25px;margin:2px;background:transparent url(data:image/gif;base64,r0lgodlheaaqaiaaajmzmf///yh5baaaaaaalaaaaaaqabaaaaijhi9pwe2+nmrriqrmjbrmyb1y93ak+ixvd6ltiizwa5jqwaaaow==) no-repeat 5px center; width:150px;} .menu>ul>li>ul>li ul{margin-left:140px; margin-top:-30px;} .menu li.expand>a,.menu li.expand>span{background:transparent url(data:image/png;base64,r0lgodlhawaqaiabaaaaap///yh5baeaaaealaaaaaadabaaaaikji8jbtv/wko0fqa7) no-repeat right center; padding-right:10px; margin-right:5px;} .menu>ul>li.expand>a,.menu>ul>li.expand>span{ background-image:url(data:image/png;base64,ivborw0kggoaaaansuheugaaaayaaaadcayaaacwax77aaaaaxnsr0iars4c6qaaaarnqu1baacxjwv8yquaaaajcehzcwaadsmaaa7dacdvqgqaaaaasurbvbhxy2bgypipawofmsxbgjaa0wnmawasvqv19uvkmwaaaabjru5erkjggg==);} id=mainnav class=menu> href=#>link href=#>link class=expand> href=#>link href=#>link href=#>link class=expand> href=#>很长很长很长很长很长很长很长很长很长很长 href=#>link href=#>link class=expand> href=#>linklink class=expand> href=#>link href=#>link href=#>link href=#>link href=#>link href=#>link href=#>link class=expand>span 菜单项 span 菜单项 href=#>link href=#>link href=#>link href=#>link href=#>link href=#>link href=#>link href=#>link href=#>link href=#>link href=#>link href=#>link
既然你这么问了，我就当你是新手了，还好，我也是新手。
下面开说：
感觉用select标签效果好像不是很好，效果如下：
不如直接像 不如直接像 @周黎伟所说的，用一个button加上4个div
首先复习一下基本知识：
display：
所以这里我用inline－block所以这里我用inline－block
代码如下：
希望大神们能批评指正
最后的效果如图：
lang=en> charset=utf-8> 下拉菜单 text/css> .bt{ width: 50px;height: 28px; border: 1px solid #ddd; background-color: #eee; font:12px 宋体; } .ct{ display: none;} .dt{ height: 30px; margin-top: 0px; border: 1px solid #ddd; background-color: white; padding:auto 10px; } .dt1{ height: 30px; margin-top: 1px; border: 1px solid #ddd; background-color: white; padding:auto 10px;} .dt:hover,.dt1:hover{background-color: #ddd;} .bt:hover{background-color: green;} .at:hover .ct{display: inline-block;} class=at> class=bt type=button >按钮
class=ct > class=dt1>下拉菜单
class=dt>下拉菜单
class=dt>下拉菜单
class=dt>下拉菜单
要求不高的话用bootstrap 就好了。
做这个功能不难，难的是如何封装和复用。
个人看好polymer这种解决方案。 charset=utf-8> css实现下拉菜单 text/css> *{ margin: 0; padding: 0; } #nav{ background-color: #eee; width: 300px; height: 40px; margin: 0 auto; } ul{ list-style: none; } ul li { float: left; line-height: 40px; text-align: center; } a{ text-decoration: none; color:#000; padding: 0 10px; display: block; } a:hover{ color: #fff; background-color: #666; } ul li ul li{ float: none; background-color: #eee; margin-top: 2px; } ul li ul { position: absolute; display: none; } ul li ul li a:hover{ background-color: #06f; } ul li:hover ul{ display: block; } id=nav> href=#>按钮1 href=#>按钮2 href=#>下拉菜单项 href=#>下拉菜单项 href=#>按钮3 href=#>下拉菜单项 href=#>下拉菜单项 href=#>下拉菜单项 href=#>按钮4 href=#>按钮5
这个是网易云课堂前端微专业的页面布局的期末测试题。我也试一下。
这里大部分答案都是hover事件触发下拉菜单出现。其实我总觉得这样不太自然，所以我尽力去做成（伪）点击触发。
---------------------------------------------------------------------
# 具体想法：
菜单是， 下拉菜单的容器是...
然后利用a:focus + .dropdown{ ... } 来实现。
---------------------------------------------------------------------
要点1：css如何实现影响其他元素？
看这里 > html - how to affect other elements when a div is hovered
要点2： 如何做出（伪）点击触发？
基本用 a：focus，个人感觉自然一点。当然如果失去焦点，下拉菜单容器也会相应地隐藏。
--------------------------------------------------------------------
# html body 部分代码：
href=#>menu class=drop-down id=drop-down> option 1 option 2 option 3 option 4
更正一点小错误，只有一个单选按钮时，选中后就不能取消选中了。所以最好用复选按钮。
原答案如下
===========================
楼上有同学写了css用伪类:hover实现的下拉菜单 这是一种 我再补充下
下拉菜单抛开样式的不同 交互上无非两种
鼠标移到button上出现菜单（如楼上）
以及点击后出现菜单（我要说的）
题主问的是html+css 而很多同学提到了用js添加click事件 这也是大多数下拉菜单的做法
不过为了不跑题 就只用html+css 不用js 那就考css基本功了
这里简单说下思路
html结构如下
点击我出现下拉菜单type=checkbok> xxx xxx xxx xxx
用列表，隐藏，然后hover.的时候block就可以了http://pepsized.com/css-only-alternative-to-the-select-element/
如果想用纯css实现click效果:
http://tympanus.net/codrops/2012/12/17/css-click-events/