ナビゲーションバーの 2 番目のドロップダウンメニューの完全なコードを実装する HTML+CSS

ヒント: 右側のコードエディターのコードは、すべての人に効果を示すためのもので、幅と内容が簡略化されています

<!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> </ul> </div> </body>

提出するリセットコード

自動運転