誰(shuí)可能寫(xiě)一段最簡(jiǎn)單代碼 給我講下下拉菜單的原理
大概知道是下拉菜單初始設(shè)置display：none
鼠標(biāo)移動(dòng)上去display:block
謝謝了 卡了好久 想不通?
kixv
2016-05-10
1 回答
舉報(bào)
0/150
提交
取消
2016-05-11
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>橫排二級(jí)下拉菜單</title>
<style type="text/css">
* {?margin:0;?padding:0;}
ul, li {?list-style:none;}
a {?text-decoration:none;}
.nav {?border:2px solid #ccc;?border-right:none;?overflow:hidden;?float:left;?margin:100px 0 0 300px;}
.nav ul li {?float:left;} //li本身是塊元素，在制作一級(jí)菜單欄要變成行內(nèi)元素，也可以寫(xiě)成display:inline;
.nav ul li a {?width:120px;?height:40px;?text-align:center;?line-height:40px;?display:block;?border-right:2px solid #ccc;?background:#eee;?color:#666;}//給a寫(xiě)樣式，記住a標(biāo)簽要轉(zhuǎn)變?yōu)閴K級(jí)元素，這樣之前設(shè)置的寬高才會(huì)顯示；
.nav ul li a:hover{?color:#f00;?}//鼠標(biāo)指到li時(shí)改變字體顏色
//?添加完二級(jí)欄目后，現(xiàn)在我們開(kāi)始添加css樣式，首先給<li>標(biāo)簽下的<ul>標(biāo)簽添加相對(duì)定位，再去除之下<li>標(biāo)簽的做浮動(dòng)樣式，再適當(dāng)修改<a>標(biāo)簽
.nav ul li ul {?position:absolute;?display:none;} ?//二級(jí)標(biāo)簽要隱藏
.nav ul li ul li {?float:none;}
.nav ul li ul li a {?border-right:none;?border-top:1px dotted #ccc;?background:#f5f5f5;}
.nav ul li:hover ul{?display:block;?}//由于二級(jí)標(biāo)簽隱藏，現(xiàn)在給鼠標(biāo)樣式時(shí)要寫(xiě)顯示；表示鼠標(biāo)指示到該元素上時(shí)則顯示
</style>
</head>
<body>
<div class="nav">
? <ul>
??? <li><a href="#">欄目一</a>
????? <ul>
??????? <li><a href="#">二級(jí)欄目</a></li>
??????? <li><a href="#">二級(jí)欄目</a></li>
??????? <li><a href="#">二級(jí)欄目</a></li>
??????? <li><a href="#">二級(jí)欄目</a></li>
????? </ul>
??? </li>
??? <li><a href="#">欄目二</a>
????? <ul>
??????? <li><a href="#">二級(jí)欄目</a></li>
??????? <li><a href="#">二級(jí)欄目</a></li>
??????? <li><a href="#">二級(jí)欄目</a></li>
??????? <li><a href="#">二級(jí)欄目</a></li>
????? </ul>
??? </li>
??? <li><a href="#">欄目三</a>
????? <ul>
??????? <li><a href="#">二級(jí)欄目</a></li>
??????? <li><a href="#">二級(jí)欄目</a></li>
??????? <li><a href="#">二級(jí)欄目</a></li>
??????? <li><a href="#">二級(jí)欄目</a></li>
??????? <li><a href="#">二級(jí)欄目</a></li>
????? </ul>
??? </li>
??? <li><a href="#">欄目四</a></li>
??? <li><a href="#">欄目五</a></li>
? </ul>
</div>
</body>
</html>
還有什么不明白地方再說(shuō)，這個(gè)百度上有很多這樣的例子 ?你可以多練習(xí)下