PHP开发导航栏二级下拉菜单完整代码

提示：右边的代码编辑器中的代码是为了给大家演示效果，宽度与内容作了精简

下面的代码可以复制本地去运行，效果更为显著

<!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>

新建文件

                    <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>导航栏加下拉菜单</title>

 <style>
 li{
 list-style-type:none;
 }
 #menu {
 width:370px;
 margin:30px auto 0px;
 height:45px;
 background-color: #030e11;

 }

 #menu li {
 float:left;
 width:92px;
 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="nodrop">关于我们</a></li>-->
 　　　<li><a href="#" class="nodrop">联系我们</a></li>
 </ul>
</div>
</body>
                

提交重置代码

自动运行

全屏

PHP开发导航栏二级下拉菜单完整代码

全部评论我要评论

全部笔记发布笔记

PHP开发 导航栏二级下拉菜单完整代码

全部评论我要评论

全部笔记发布笔记

PHP开发导航栏二级下拉菜单完整代码