博客园添加横向菜单

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

  <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>
posted @ 2021-08-29 19:47  zhaogaojian  阅读(45)  评论(0编辑  收藏  举报