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);
  
}
相关推荐
月出几秒前
社交登录 - Twitter(前后端完整实现)
前端·twitter
万添裁几秒前
C++的const_cast
开发语言·前端·javascript
小桥风满袖1 分钟前
极简三分钟ES6 - 解构赋值
前端·javascript
掘金安东尼6 分钟前
什么是 OKLCH 颜色?
前端·javascript·github
疏影横斜8 分钟前
Windows 中使用 fnm 管理 node (bash配置)
前端·node.js
用户2519162427119 分钟前
Node之net模块
前端·javascript·node.js
李逍11 分钟前
pragmatic-drag-and-drop 拖拽神器上手
前端·javascript
阿笑带你学前端13 分钟前
当手机遇上电视:Flutter实现局域网遥控输入的奇妙之旅
前端·flutter
张可14 分钟前
Kotlin 函数式编程思想
android·前端·kotlin
A了LONE15 分钟前
uniapp的上拉加载H5和小程序
前端·javascript·vue.js