HTML导航栏二级菜单(垂直、水平方向)

二级菜单是指主菜单的子菜单。菜单栏实际是一种树型结构,子菜单是菜单栏的一个分支。简单分享主要的垂直和水平方向的CSS设计。

垂直方向:

HTML:

javascript 复制代码
<body>
    
<div>
    <ul>
        <li><a href="#">家用电器</a>
            <ul>
                <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>
        </li>
        <li><a href="">运动户外</a>
            <ul>
                <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>
        </li>
        <li><a href="">食品</a>
            <ul>
                <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>
        </li>
        <li><a href="">电脑配件</a>
            <ul>
                <li><a href="#">主板</a></li>
                <li><a href="#">硬盘</a></li>
                <li><a href="#">CPU</a></li>
                <li><a href="#">内存</a></li>
                <li><a href="#">电源</a></li>
            </ul>
        </li>
        <li><a href="">居家用品</a>
            <ul>
                <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>
        </li>
    </ul>
</div>
</body>

CSS:

javascript 复制代码
* {
    margin: 0;
    padding: 0;    
}

body{
    background-color:rgba(184, 8, 190, 0.918);
}

div{ 
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -300px;
    margin-top: -250px;
}

div>ul>li{
    float:left;
}

li{
     list-style: none;
 }

li>ul{
    display: none;
    margin-top: 10px; 

}

li:hover ul{
    display: block;
}

a {
    text-decoration: none;
    display: block;
    width: 120px;
    font-size: 20px;
    text-align: center;
    color:rgb(14, 252, 180);
}

水平方向:

HTML:

javascript 复制代码
<body>
    <div>
        <ul>
            <li><a href="#">家用电器</a>
                <ul>
                    <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>
            </li>
            <li><a href="">运动户外</a>
                <ul>
                    <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>
            </li>
            <li><a href="">食品</a>
                <ul>
                    <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>
            </li>
            <li><a href="">电脑配件</a>
                <ul>
                    <li><a href="#">主板</a></li>
                    <li><a href="#">硬盘</a></li>
                    <li><a href="#">CPU</a></li>
                    <li><a href="#">内存</a></li>
                    <li><a href="#">电源</a></li>
                </ul>
            </li>
            <li><a href="">居家用品</a>
                <ul>
                    <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>
            </li>
        </ul>
    </div>
</body>

CSS:

javascript 复制代码
* {
    margin: 0;
    padding: 0;
}

body{
    background-color:rgba(184, 8, 190, 0.918);
}


div{
    position: absolute;
    left: 50%;
    top:  50%;
    margin-left: -60px;
    margin-top: -250px;
}

div>ul>li{
    width: 120px;
    height: 50px;
    flex:1;
    display: flex;
    flex-flow: column;
    justify-content: space-between; 

}

li {
    position: relative;
    list-style: none;   
}


li>ul {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
}

li:hover ul {
    display: block;
}

a {
    margin-left: -50px;
    text-decoration: none;
    display: block;
    width: 120px;
    font-size: 20px;
    text-align: center;
    color:rgb(14, 252, 180);
  
}
相关推荐
凌辰揽月33 分钟前
AJAX 学习
java·前端·javascript·学习·ajax·okhttp
然我2 小时前
防抖与节流:如何让频繁触发的函数 “慢下来”?
前端·javascript·html
鱼樱前端2 小时前
2025前端人一文看懂 Broadcast Channel API 通信指南
前端·vue.js
烛阴3 小时前
非空断言完全指南:解锁TypeScript/JavaScript的安全导航黑科技
前端·javascript
鱼樱前端3 小时前
2025前端人一文看懂 window.postMessage 通信
前端·vue.js
快乐点吧3 小时前
【前端】异步任务风控验证与轮询机制技术方案(通用笔记版)
前端·笔记
pe7er4 小时前
nuxtjs+git submodule的微前端有没有搞头
前端·设计模式·前端框架
七月的冰红茶4 小时前
【threejs】第一人称视角之八叉树碰撞检测
前端·threejs
爱掉发的小李4 小时前
前端开发中的输出问题
开发语言·前端·javascript
祝余呀4 小时前
HTML初学者第四天
前端·html