Barre de navigation de développement PHP menu déroulant secondaire code complet
Conseils : Le code dans l'éditeur de code à droite sert à démontrer l'effet, et la largeur et le contenu ont été simplifiés
Le code suivant Vous pouvez le copier localement et l'exécuter, et l'effet sera plus significatif
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PHP中文网</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="#">网站建设</a></li>
<li><a href="#">导航条代码</a></li>
<li><a href="#">最火下载站</a></li>
<li><a href="#">电子商务</a></li>
<li><a href="#">网站制作</a></li>
</ul>
</div>
</div>
</li>
<li><a href="#" class="drop">网站建设</a>
<div class="dropdown_1column">
<div class="col_1">
<ul class="simple">
<li><a href="#">网站建设</a></li>
<li><a href="#">导航条代码</a></li>
<li><a href="#">最火下载站</a></li>
<li><a href="#">网站推广</a></li>
<li><a href="#">网站优化</a></li>
<li><a href="#">网站制作</a></li>
</ul>
</div>
</div>
</li>
<li><a href="#" class="drop">网络营销</a>
<div class="dropdown_1column">
<div class="col_1">
<ul class="simple">
<li><a href="#">网站建设</a></li>
<li><a href="#">导航条代码</a></li>
<li><a href="#">最火下载站</a></li>
<li><a href="#">电子商务</a></li>
<li><a href="#">网站推广</a></li>
<li><a href="#">网站优化</a></li>
<li><a href="#">网站制作</a></li>
</ul>
</div>
</div>
</li>
<li><a href="#" class="drop">网络营销</a>
<div class="dropdown_1column">
<div class="col_1">
<ul class="simple">
<li><a href="#">网站建设</a></li>
<li><a href="#">导航条代码</a></li>
<li><a href="#">最火下载站</a></li>
<li><a href="#">电子商务</a></li>
<li><a href="#">网站推广</a></li>
<li><a href="#">网站制作</a></li>
</ul>
</div>
</div>
</li>
<li><a href="#" class="nodrop">关于我们</a></li>
<li><a href="#" class="nodrop">联系我们</a></li>
</ul>
</div>
</body>
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
