PHP development navigation bar secondary drop-down menu complete code
Tips: The code in the code editor on the right is to demonstrate the effect for everyone, and the width and content have been simplified
The following code You can copy it locally and run it, and the effect will be more significant
<!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; /*導航欄文字顏色 */
}
#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;} /*下拉菜單鼠標停留顏色*/
#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">首 頁</a></li>
<li><a href="" class="drop">最火下載站</a>
<div class="dropdown_1column">
<div class="col_1">
<ul class="simple">
<li><a href="#">網(wǎng)站建設</a></li>
<li><a href="#">導航條代碼</a></li>
<li><a href="#">最火下載站</a></li>
<li><a href="#">電子商務</a></li>
<li><a href="#">網(wǎng)站制作</a></li>
</ul>
</div>
</div>
</li>
<li><a href="#" class="drop">網(wǎng)站建設</a>
<div class="dropdown_1column">
<div class="col_1">
<ul class="simple">
<li><a href="#">網(wǎng)站建設</a></li>
<li><a href="#">導航條代碼</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)絡營銷</a>
<div class="dropdown_1column">
<div class="col_1">
<ul class="simple">
<li><a href="#">網(wǎng)站建設</a></li>
<li><a href="#">導航條代碼</a></li>
<li><a href="#">最火下載站</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)絡營銷</a>
<div class="dropdown_1column">
<div class="col_1">
<ul class="simple">
<li><a href="#">網(wǎng)站建設</a></li>
<li><a href="#">導航條代碼</a></li>
<li><a href="#">最火下載站</a></li>
<li><a href="#">電子商務</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>
