如何通過html和css完成下拉菜單的製作？
例如這種，當然這只是一個例子，其他的也行，如果可以，請簡要說明一下用到哪些技能點和原理。
要求不高的話用bootstrap 就好了。
做這個功能不難，難的是如何封裝和復用。
個人看好polymer這種解決方案。我也試一下。這裡大部分答案都是hover事件觸發下拉菜單出現。其實我總覺得這樣不太自然，所以我儘力去做成（偽）點擊觸發。---------------------------------------------------------------------# 具體想法：菜單是&， 下拉菜單的容器是&...&然後利用a:focus + .dropdown{ ... } 來實現。---------------------------------------------------------------------要點1：CSS如何實現影響其他元素？看這裡 &> html - How to affect other elements when a div is hovered要點2： 如何做出（偽）點擊觸發？
基本用 a：focus，個人感覺自然一點。當然如果失去焦點，下拉菜單容器也會相應地隱藏。
--------------------------------------------------------------------# HTML BODY 部分代碼：&
&Menu&
&
&
#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;
}
-----------------------------------------------------------------------
最後實現效果：
希望對題主有幫助。
無腳本，純HTML和 CSS 實現的多級下拉菜單，在非 IE 內核瀏覽器和 IE8+ 表現完美。
主體使用ul&>li&>ul&>li&>......嵌套定義多級。
&
&
&
&
&
&
.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==);}
&
&
&
&
&
&
&
&
&
&
&
既然你這麼問了，我就當你是新手了，還好，我也是新手。
下面開說：
感覺用select標籤效果好像不是很好，效果如下：
首先複習一下基本知識：
display：
代碼如下：
&
&
&
&
&
&