html 二级菜单

全栈程序员站长

发布于 2022-08-11 13:55:19

3.8K0

文章被收录于专栏：全栈程序员必看全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

先放效果图：

首先设置菜单的基本轮廓

<div id="nav">
    <ul>
        <li><a href="#">一级菜单1</a></li>
        <li><a href="#">一级菜单2</a></li>
        <li>
            <a href="#" class="caidan3">菜单3</a>
            <ul class="yincang">
                <li><a href="#">javascript</a></li>
                <li><a href="#">子菜单2</a></li>
                <li><a href="#">子菜单3</a></li>
            </ul>
        </li>
        <li><a href="#">一级菜单3</a></li>
        <li><a href="#">一级菜单4</a></li>
        <li><a href="#">一级菜单5</a></li>
    </ul>

</div>

基本原理就是二级菜单先设置隐藏，当鼠标放到一级菜单之上时再显示二级菜单

核心代码：

 ul li ul{ 
   
            display: none;
        }
        li:hover .yincang{ 
   
            display: block;
        }

注意要点

1.一级菜单和二级菜单必须在同一个父元素之下。 2. （这之前的必须是一级菜单的上一级，比如当前代码，一级菜单是“菜单三”，为a标签，那么这里就应该写它的上一级‘li’）li：hover .yincang（后面就直接写被隐藏的元素标签） 3. line-height: 设置行间距 4. text-decoration: none ：去除a元素的下划线 5. list-style：none ：去除 ul li的圆点

完整代码：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style> *{ 
     margin: 0; padding: 0; } #nav{ 
     background: #eee; width: 600px; height: 40px; margin: 0 auto; } ul{ 
     list-style:none; } ul li{ 
     float: left; line-height: 40px; text-align: center; position: relative; } a{ 
     text-decoration: none; color: #000; display: block; padding: 0 10px; height: 40px; } a:hover{ 
     color: #fff; background: #666; } ul li ul li{ 
     float: none; background: #eee; margin-top: 2px; } ul li ul{ 
     position: absolute; left: 0; top: 40px; } ul li ul li a{ 
     width: 80px; } ul li ul li a:hover{ 
     background: #06f; } ul li ul{ 
     display: none; } .yiji:hover .yincang{ 
     display: block; } </style>
</head>
<body>
<div id="nav">
    <ul>
        <li><a href="#">一级菜单1</a></li>
        <li><a href="#">一级菜单2</a></li>
        <li class="yiji">
            <a href="#" class="caidan3">菜单3</a>
            <ul class="yincang">
                <li><a href="#">javascript</a></li>
                <li><a href="#">子菜单2</a></li>
                <li><a href="#">子菜单3</a></li>
            </ul>
        </li>
        <li><a href="#">一级菜单3</a></li>
        <li><a href="#">一级菜单4</a></li>
        <li><a href="#">一级菜单5</a></li>
    </ul>

</div>
</body>
</html>

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/130619.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年4月2，如有侵权请联系 cloudcommunity@tencent.com 删除

https