abstrak：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>CSS樣式</title><style>*{margin:0 auto;padding: 0px;}.head{width: 100%;heig
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS樣式</title>
<style>
*{margin:0 auto;padding: 0px;}
.head{width: 100%;height:60px;line-height:60px;background: #ccc;}
.nav{width:1000px;height:60px;background: wheat;}
span{display:block;width:100px;height: 60px; margin-left:20px;color: red;float: left;}
.one{height:60px;float: left;}
.one li{width:100px;text-align: center;list-style: none;float: left;margin: 0 10px;}
.one li:hover{background: pink;}
.two{height: 120px;display:none;}
.two li{width:100px;height:60px;text-align: center;list-style: none;margin: 5px 0;}
.two li:hover{background:#ccc;}
.sel:hover .two{display: block;}
</style>
</head>
<body>
<!--css樣式-->
<div class="head">
<div class="nav">
<span>我的導(dǎo)航</span>
<ul class="one">
<li class="sel">HTML
<ul class="two">
<li>小菜單1</li>
<li>小菜單2</li>
</ul>
</li>
<li>CSS#</li>
<li>JAVASCRIPT</li>
<li>PHP</li>
</ul>
</div>
</div>
</body>
</html>
Guru membetulkan：滅絕師太Masa pembetulan：2019-02-14 09:12:13
Rumusan guru：代碼思路清晰,作業(yè)相對(duì)簡(jiǎn)單哦,可以找點(diǎn)網(wǎng)頁(yè)版精美導(dǎo)航練習(xí)