サマリー：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>簡單css下拉菜單效果實現(xiàn)</title> <style type=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>簡單css下拉菜單效果實現(xiàn)</title>
<style type="text/css">
div {
list-style: none;
margin: 0 1px;float: left;
}
div :hover {
background-color: lightcoral;
}
.box1 {
width: 100%;
height: 40px;
background-color: lightblue;
}
.box2 {
width: 100px;
height: 40px;
background-color: lightblue;
line-height: 40px;
text-align: center;
margin: 0 10px;
}
.box2a {
width: 100px;
height: 40px;
background-color: lightgrey;
line-height: 40px;
text-align: center;
display: none;
color: red;
margin: 0;
}
.box2:hover .box2a{display: block;}
</style>
</head>
<body>
<div class="box1">
<div class="box2">首頁</div>
<div class="box2">視頻教程</div>
<div class="box2">技術(shù)文章
<div class="box2a">php教程</div>
<div class="box2a">MySQL教程</div>
<div class="box2a">html教程</div>
</div>
<div class="box2">編程詞典
<div class="box2a">PHP詞典</div>
<div class="box2a">MySQL詞典</div>
<div class="box2a">HTML詞典</div>
<div class="box2a">Redis詞典</div>
</div>
<div class="box2">資源下載
<div class="box2a">手冊下載</div>
<div class="box2a">工具下載</div>
<div class="box2a">學(xué)習(xí)課件</div>
<div class="box2a">JS特效</div>
<div class="box2a">網(wǎng)站源碼</div>
</div>
<div class="box2">其他</div>
</div>
</body>
</html>
個人總結(jié)：
在最外面定義一個大的div存放菜單項class等于box1，寬度為100%，里面放幾個菜單div，class都等于box2，每個菜單下面再加div，class都等于box2a；
首先把div的float設(shè)置為left：向左浮動；設(shè)置box1的寬高和背景色，box2a的margin設(shè)置為0，如果不設(shè)置，會繼承上一級屬性，存在偏移；display設(shè)置為none（隱藏），然后通過：hover實現(xiàn)鼠標(biāo)移動到上級菜單自動出現(xiàn)下級菜單。
添削の先生：查無此人添削時間：2019-04-29 09:17:15
先生のまとめ：完成的不錯。常用的css樣式，可以寫到公用文件，有新項目可以隨時使用。繼續(xù)加油。