博客园添加横向菜单

博客太多不太好管理了,增加顶部菜单,效果如下
博客园添加横向菜单

  <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        #nav {
            width: 800px;
            height: 40px;
            margin: 0 auto;
            text-align: center;
        }

        #nav ul {
            list-style: none;
            width:800px;
        }

        #nav ul li {
            float: left;
            line-height: 40px;
            text-align: center;
            position: relative;
            margin:0px 0px;
        }

        #nav ul li a {
            text-decoration: none;
            color: #000;
            display: block;
            padding: 0px 10px;
            width:100px;
            text-align: center;
        }

        #nav ul li a:hover {
            color: #FFF;
            background: #555;
            width: 100px;
        }

        #nav ul li ul {
            position: absolute;
            display: none;
        }

        #nav ul li ul li {
            float: none;
            line-height: 30px;
            text-align: left;
        }

        #nav ul li ul li a {
            width: 100px;
        }

        #nav ul li ul li a:hover {
            background-color: #555;
        }

        #nav ul li:hover ul {
            display: block
        }
    </style>
<div id="nav">
    <ul>
        <li><a href="#">开发语言</a>
            <ul>
                <li style="background-color:#FFF;width:120px"><a href="https://www.cnblogs.com/zhaogaojian/category/1996912.html">Go</a></li>
                <li style="background-color:#FFF;width:120px"><a href="https://www.cnblogs.com/zhaogaojian/category/1168218.html">C++</a></li>
                <li style="background-color:#FFF;width:120px"><a href="https://www.cnblogs.com/zhaogaojian/category/911309.html">C#</a></li>
                <li style="background-color:#FFF;width:120px"><a href="https://www.cnblogs.com/zhaogaojian/category/942150.html">JAVA后端</a></li>
            </ul>
        </li>
        <li><a href="#">Linux</a>
            <ul>
                <li style="background-color:#FFF;width:120px"><a href="https://www.cnblogs.com/zhaogaojian/category/1141952.html">基本命令</a></li>
                <li style="background-color:#FFF;width:120px"><a href="https://www.cnblogs.com/zhaogaojian/category/1996842.html">容器技术</a></li>
            </ul>
        </li>
        <li><a href="#">移动开发</a>
            <ul>
                <li style="background-color:#FFF;width:120px"><a href="https://www.cnblogs.com/zhaogaojian/category/1131158.html">Android</a></li>
                <li style="background-color:#FFF;width:120px"><a href="https://www.cnblogs.com/zhaogaojian/category/947389.html">IOS</a></li>
            </ul>
        </li>
        <li><a href="#">前端技术</a>
            <ul>
                <li style="background-color:#FFF;width:120px"><a href="https://www.cnblogs.com/zhaogaojian/category/1494575.html">AntdesignVUE</a></li>
                <li style="background-color:#FFF;width:120px"><a href="https://www.cnblogs.com/zhaogaojian/category/1635518.html">AntdesignReact</a></li>
                <li style="background-color:#FFF;width:120px"><a href="https://www.cnblogs.com/zhaogaojian/category/1645781.html">CSS</a></li>
                <li style="background-color:#FFF;width:120px"><a href="https://www.cnblogs.com/zhaogaojian/category/1656729.html">JS</a></li>
                
            </ul>
        </li>
    </ul>
</div>
上一篇:需求解决 _按条件显示标签 _20210827


下一篇:【Html】23 - flex弹性布局