html、css 实现二级菜单

不念不忘少年蓝@ 2023-06-21 04:54 10阅读 0赞

本文中，一级菜单我设计了五个元素（然后给第四个元素设计了二级菜单）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1poYW5nZ3VvaGFvNjY2_size_16_color_FFFFFF_t_70]

html：

<nav>
        <ul class="topnav clearfix">
            <li><a href="">Lorem.</a></li>
            <li><a href="">Ratione.</a></li>
            <li><a href="">Atque!</a></li>
            <li>
                <a href="">Corrupti?</a>
                <div class="submenu">
                    <ul>
                        <li>Lorem.</li>
                        <li>Possimus?</li>
                        <li>Iure.</li>
                        <li>Totam!</li>
                        <li>Consectetur.</li>
                    </ul>
                </div>
            </li>
            <li><a href="">Voluptatum.</a></li>
        </ul>
    </nav>

**对于css代码，我来逐个讲解**

**一：解决高度坍塌（清除浮动）**

因为一级菜单我是用`ul li`来做的，虽然`ul`是块级元素（`display: block;`），但是li`display: list-item;`，多个是一行一行显示的

所以我使用了浮动，来让多个`li`元素排在一行

但是，`li`使用了浮动之后，会导致一个问题，**高度坍塌：** li的父元素ul是常规流元素块盒，它的height默认值为auto，此时，它的高度不会计算不考虑浮动元素；由于ul里面只有li元素，所以会导致一个悲剧，ul元素的height为0

**高度坍塌解决办法：**

（在html中，我给ul元素一个类选择器`.clearfix`）

css：

.clearfix::after{ 
        content: "";
        display: block;
        clear: both;
    }

![在这里插入图片描述][2019121118364650.gif]

**二：实现一级菜单**

![在这里插入图片描述][20191211160151952.png]

css：

nav { 
        background: #008c8c;
        color: #fff;
        height: 40px;
        line-height: 40px;
    }
    
    nav .topnav>li{ 
        float: left;
        padding: 0 20px;
        height: 40px;
        width: 20%;
        box-sizing: border-box;
        text-align: center;
        position: relative;
    }

文字垂直居中（line-height与height取相同的值）：

height: 40px;
    line-height: 40px;

文字水平居中：

text-align: center;

![在这里插入图片描述][20191211183907580.gif]  
ul下的5个li元素，作为一级菜单，我将他们的宽度以百分比设置`width: 20%`，宽度百分比的值是相对于其包含块（其父元素ul）的width，而ul我没有设置宽度，它采用默认值`width: auto`，而且因为ul元素是常规流元素，此时，它的width会把水平剩余空间吸收掉。（可以这么认为：ul的宽度就是视口的宽度（视口：浏览器的可视窗口））

然后我又用到了css3的一个属性：

box-sizing: border-box;

**每一个html元素，都可以看作一个盒子：**

![在这里插入图片描述][2019121116161693.png]  
以我给的这个图为例，1536 × 40 ，1536为width，40为height （默认情况下，height、width决定的区域：内容盒，content-box）

但是

**box-sizing**

*  css3中的新属性，改变宽高（height、width）的影响范围
 *  **`box-sizing: border-box;`宽高影响范围为边框盒  
    比如说：（width = 内容宽 + padding-left + padding-right + border-left + border-right），当width设置好之后，内容宽的值会随border和padding的取值而随之变化**
 *  注意啊：box-sizing的取值只有content-box和border-box；前两者加paddding-box是background-clip的取值
 *  内容盒 content-box = 内容区（默认情况下，height、width决定的区域）
 *  填充盒 padding-box = 内容区 + 填充区
 *  **边框盒 border-box = 内容区 + 填充区 + 边框**

所以效果上来看就是：一级菜单中的5个元素，在水平方向上各占20%

**我给一级菜单的li元素还设置了一个属性：相对定位**

它是用来把一级菜单的li元素的内容盒给二级菜单作为包含块的：

*  包含块：决定了盒子的排列规则
 *  将二级菜单的元素设置为绝对定位`position: absolute;`
 *  **绝对定位元素的包含块：找祖先元素中第一个定位元素，改元素的填充盒；若找不到，则它的包含块为整个网页（初始化包含块）**  
    这样，二级菜单就会相对于其对应的一级菜单的内容盒进行定位了

![在这里插入图片描述][2019121118364650.gif]

**三：实现二级菜单**

以免篇幅拖沓，本文只给一级菜单的第四个li元素设计了二级菜单  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1poYW5nZ3VvaGFvNjY2_size_16_color_FFFFFF_t_70]

*  一般，页面上只显示一级菜单，需要点击一级菜单，才会出现相应的二级菜单
 *  需要用到伪类`:hover`  
    鼠标悬停在元素上时的样式

（在html中，我给一级菜单的第四个li元素设置了一个选择器`.submenu`）  
css：

nav .topnav>li:hover{ 
        color: #f40;
        font-weight: bold;
    }
    
    nav .topnav>li .submenu{ 
        position: absolute;
        right: 0;
        width: 100%;
        background-color: #008c8c;
        color: #fff;
        text-align: left;
        line-height: 1.5;
        /* 不生成盒子（即隐藏） */
        display: none;
    }
    
    nav .topnav>li:hover .submenu{ 
        display: block;
        padding: 10px;
    }

补充一嘴：在css中书写选择器时，比如：

nav .topnav>li:hover

选中nav元素下的.topnav元素的子元素li，并且有鼠标悬停在上面

*  空格，选后代元素
 *  `>`，选子元素

自此，本文结束，虽然比较简陋，但是二级菜单的基本结构是搭建起来了（一级菜单用浮动，二级菜单用定位）  
![在这里插入图片描述][20191211185003147.jpg]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1poYW5nZ3VvaGFvNjY2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191211170622717.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1poYW5nZ3VvaGFvNjY2,size_16,color_FFFFFF,t_70
[2019121118364650.gif]: https://img-blog.csdnimg.cn/2019121118364650.gif
[20191211160151952.png]: https://img-blog.csdnimg.cn/20191211160151952.png
[20191211183907580.gif]: https://img-blog.csdnimg.cn/20191211183907580.gif
[2019121116161693.png]: https://img-blog.csdnimg.cn/2019121116161693.png
[20191211185003147.jpg]: https://img-blog.csdnimg.cn/20191211185003147.jpg