摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>簡(jiǎn)單css下拉菜單效果實(shí)現(xiàn)</title> <style type=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>簡(jiǎn)單css下拉菜單效果實(shí)現(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">首頁(yè)</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">手冊(cè)下載</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>
個(gè)人總結(jié)：
在最外面定義一個(gè)大的div存放菜單項(xiàng)class等于box1，寬度為100%，里面放幾個(gè)菜單div，class都等于box2，每個(gè)菜單下面再加div，class都等于box2a；
首先把div的float設(shè)置為left：向左浮動(dòng)；設(shè)置box1的寬高和背景色，box2a的margin設(shè)置為0，如果不設(shè)置，會(huì)繼承上一級(jí)屬性，存在偏移；display設(shè)置為none（隱藏），然后通過：hover實(shí)現(xiàn)鼠標(biāo)移動(dòng)到上級(jí)菜單自動(dòng)出現(xiàn)下級(jí)菜單。
批改老師：查無此人批改時(shí)間：2019-04-29 09:17:15
老師總結(jié)：完成的不錯(cuò)。常用的css樣式，可以寫到公用文件，有新項(xiàng)目可以隨時(shí)使用。繼續(xù)加油。