Bar navigasi pembangunan PHP menu lungsur sekunder kod lengkap
Petua: Kod dalam editor kod di sebelah kanan adalah untuk menunjukkan kesan, dan lebar serta kandungan telah dipermudahkan
kod berikut Anda boleh menyalinnya secara setempat dan menjalankannya, dan kesannya akan menjadi lebih ketara
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PHP中文網(wǎng)</title>
<style>
li{
list-style-type:none;
}
#menu {
width:950px;
margin:30px auto 0px;
height:45px;
background-color: #030e11;
}
#menu li {
float:left;
width:109px;
line-height:39px;
text-align:center;
position:relative;
border:none;
}
#menu li a {
font-size:16px; color: #e6f8e9;
display:block;
outline:0;
text-decoration:none; }
#menu li:hover a {
color: #ff0000; /*導(dǎo)航欄文字顏色 */
}
#menu li:hover .dropdown_1column {
left:0px;
top:38px;
}
.dropdown_1column{ /* 下拉菜單邊框顏色*/
margin:0px auto;
float:left;
position:absolute;
left:-999em;
text-align:left;
border:1px solid #066591;
border-top:none;
background:#F4F4F4;
width: 140px;
}
#menu li:hover div a { /* 下拉菜單文字顏色*/
font-size:12px
;color:#444;
}
#menu li:hover div a:hover{color:#21910e;} /*下拉菜單鼠標(biāo)停留顏色*/
#menu li ul {
list-style:none;padding:10px 5px;
margin:0;
}
#menu li ul li {
font-size:12px;
line-height:26px;
position:relative;
padding:0;margin:0;
float:none;
text-align:left;
width:130px;
}
#menu li ul li:hover {
background:none;
border:none;padding:0;
margin:0;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="" class="nodrop">首 頁(yè)</a></li>
<li><a href="" class="drop">最火下載站</a>
<div class="dropdown_1column">
<div class="col_1">
<ul class="simple">
<li><a href="#">網(wǎng)站建設(shè)</a></li>
<li><a href="#">導(dǎo)航條代碼</a></li>
<li><a href="#">最火下載站</a></li>
<li><a href="#">電子商務(wù)</a></li>
<li><a href="#">網(wǎng)站制作</a></li>
</ul>
</div>
</div>
</li>
<li><a href="#" class="drop">網(wǎng)站建設(shè)</a>
<div class="dropdown_1column">
<div class="col_1">
<ul class="simple">
<li><a href="#">網(wǎng)站建設(shè)</a></li>
<li><a href="#">導(dǎo)航條代碼</a></li>
<li><a href="#">最火下載站</a></li>
<li><a href="#">網(wǎng)站推廣</a></li>
<li><a href="#">網(wǎng)站優(yōu)化</a></li>
<li><a href="#">網(wǎng)站制作</a></li>
</ul>
</div>
</div>
</li>
<li><a href="#" class="drop">網(wǎng)絡(luò)營(yíng)銷</a>
<div class="dropdown_1column">
<div class="col_1">
<ul class="simple">
<li><a href="#">網(wǎng)站建設(shè)</a></li>
<li><a href="#">導(dǎo)航條代碼</a></li>
<li><a href="#">最火下載站</a></li>
<li><a href="#">電子商務(wù)</a></li>
<li><a href="#">網(wǎng)站推廣</a></li>
<li><a href="#">網(wǎng)站優(yōu)化</a></li>
<li><a href="#">網(wǎng)站制作</a></li>
</ul>
</div>
</div>
</li>
<li><a href="#" class="drop">網(wǎng)絡(luò)營(yíng)銷</a>
<div class="dropdown_1column">
<div class="col_1">
<ul class="simple">
<li><a href="#">網(wǎng)站建設(shè)</a></li>
<li><a href="#">導(dǎo)航條代碼</a></li>
<li><a href="#">最火下載站</a></li>
<li><a href="#">電子商務(wù)</a></li>
<li><a href="#">網(wǎng)站推廣</a></li>
<li><a href="#">網(wǎng)站制作</a></li>
</ul>
</div>
</div>
</li>
<li><a href="#" class="nodrop">關(guān)于我們</a></li>
<li><a href="#" class="nodrop">聯(lián)系我們</a></li>
</ul>
</div>
</body>
