abstrak：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>導(dǎo)航欄下拉菜單</title> <style>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>導(dǎo)航欄下拉菜單</title>
<style>
/*導(dǎo)航條*/
div{width: 100%;
background: #2F3E45;
height: 52px;
}
/*unorder 樣式去除*/
ul{
list-style: none;
}
/*一級(jí)li標(biāo)簽左浮動(dòng)*/
.nav>li{
float: left;
}
/*ul a標(biāo)簽相關(guān)屬性*/
ul a{
display: block;/*塊級(jí)元素*/
text-decoration: none;
width: 100px;
height: 50px;
text-align: center;
line-height: 50px;
color: white;
background-color: #2f3e45;
border: 1px solid blue;
}
/*導(dǎo)航欄第一級(jí)菜單第一個(gè)li標(biāo)簽邊框第1、第4角設(shè)置為10px圓角*/
.nav>li:first-child a{
border-radius: 10px 0 0 10px;
}
/*導(dǎo)航欄第一級(jí)菜單最后一個(gè)li標(biāo)簽邊框第2、第3角設(shè)置為10px圓角*/
.nav>li:last-child a{
border-radius: 0 10px 10px 0;
}
/*產(chǎn)品分類之子菜單*/
.drop-sub{
padding: 0;
display: none;
}
.drop-sub01{
padding: 0;
display: none;
}
/*浮動(dòng)子菜單背景色及字體顏色*/
.drop-sub li:hover a{
background-color:purple;
}
.drop-sub01 li:hover a{
background-color:red;
}
/*產(chǎn)品分類hover顯示子菜單*/
.nav .drop-down:hover .drop-sub{
display: block;
}
.nav .drop-down01:hover .drop-sub01{
display: block;
}
/* .nav li:hover a{color: blue;}*/
</style>
<script type="text/javascript">
function dianwo(x){
x.style.borderRadius="50px";
x.style.background="purple";
alert("WWW.51SPEC.COM");
x.style.width="200px"
}
</script>
</head>
<body ="dianwo(this)">
<div>
<ul class="nav">
<li ><a href="#" onclick="dianwo(this)">點(diǎn)我</a></li>
<li class="drop-down" onClick="while(1==1){alert('豬是念著倒')}"><a href="http://www.51spec.com" target="_blank">不要點(diǎn)我</a>
<ul class="drop-sub">
<li><a href="http://www.51spec.com" target="_blank">電氣電子</a></li>
<li><a href="http://www.51spec.com" target="_blank">傳感測(cè)量</a></li>
<li><a href="http://www.51spec.com" target="_blank">自動(dòng)控制</a></li>
</ul>
</li>
<li class="drop-down01"><a href="http://www.51spec.com" target="_blank">品牌匯</a>
<ul class="drop-sub01">
<li><a href="http://www.51spec.com" target="_blank">霍尼韋爾</a></li>
<li><a href="http://www.51spec.com" target="_blank">高諾斯</a></li>
<li><a href="http://www.51spec.com" target="_blank">快達(dá)</a></li>
<li><a href="http://www.51spec.com" target="_blank">威圖</a></li>
</ul>
</li>
<li><a href="http://www.51spec.com" target="_blank">資料下載</a></li>
<li><a href="http://www.51spec.com" target="_blank">資訊中心</a></li>
</ul>
</div>
</body>
</html>
Guru membetulkan：滅絕師太Masa pembetulan：2018-12-29 09:40:38
Rumusan guru：確實(shí)搞事情了，我就倒著念了……作業(yè)完成的不錯(cuò)，事件方法最好都測(cè)試一下奧！