CSS之二级弹出菜单设计

小灰灰 2021-05-03 04:22 725阅读 0赞

## 1、css里面两种隐藏方式： ##

（1） `display: none;`不占用物理空间  
(2)`visibility:hidden;`占用物理空间

## 2、选择器： ##

1、后代选择器：\`\`.aside ul li\{

`2、子代选择器：`.aside ul > li\{

3、邻代选择器：\`.aside ul + li\{

## 3、CSS之伪元素案例： ##

.sub-nav:before{ 
                content: '';
                width: 0px;
                height: 0px;
                border-left: 5px solid rgba(255, 255, 255, 0);
                border-bottom: 5px solid rgba(255, 255, 255, 0);
                border-top: 5px solid rgba(255, 255, 255, 0);
                border-right: 5px solid black;
                display: inline-block;
           }

完整代码实现：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>后台首页</title> <link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"> <style type="text/css"> *{ 
               margin: 0;
               padding: 0%;
             }
           .header{ 
               width: 100%;
               height: 60px;
               background-color: black;
               position: absolute;
               left: 50px;
               top: opx;
               right: 0px;
           }
           ul,ol{ 
               list-style: none;
           }
           .aside{ 
              width:50px;
              position: absolute;
              left: 0px;
              top: 0px;
              bottom: 0px;
              background-color: yellow;
              color:red;
           }
    
           .article{ 
               left: 50px;
               right:0px;
               top: 60px;
               bottom: 0px;
               background-color: brown;
               position: absolute;
           }
    
           .hidden{ 
               display: none;
           }
    
           .aside ul > li{ 
              
               width: 50px;
               height: 50px;
               text-align:center ;
               line-height: 50px;
               position: relative;
           }
    
           .aside ul > li:hover{ 
               background-color: black;
               opacity: 1;
           }
    
           .aside ul > li:hover div{ 
               display: block;
           }
           .aside .logo{ 
            width: 50px;
            height: 60px;
            text-align: center;
           }
           .aside .logo img{ 
            width: 40px;
            height: 40px;
            vertical-align: middle;
           }
    
           .sub-nav{ 
               width: 210px;
               min-height: 0px;
               position: absolute;
               left: 50px;
               top: 0px;
               z-index: 999;
           }
           
           .sub-nav ol{ 
             background-color: yellow;
             float: right;
           }
    
           .sub-nav ol>li{ 
               width: 200px;
               height: 50px;
               text-align: center;
               line-height: 50xp;
               color: white;
           }
    
           .sub-nav ol>li:hover{ 
               background-color: turquoise;
           }
           .sub-nav:before{ 
                content:'';
                width: 0px;
                height: 0px;
                border-left: 5px solid rgba(255, 255, 255, 0);
                border-bottom: 5px solid rgba(255, 255, 255, 0);
                border-top: 5px solid rgba(255, 255, 255, 0);
                border-right: 5px solid black;
                display: inline-block;
           }
    
        </style>
    </head>
    <body>
        
        <header class="header">
           <div>
               <img src=""/>
           </div>
           <div>
                <img src=""/>
                <span>Young</span>
            </div>
        </header>
    
            <aside class="aside">
                <h3 class="logo"> 
                    <img src="D:\Users\YYB\Desktop\Young\images\1.jpg"/>
                </h3>
                <ul>
                    <li>
                        <h5> 
                            <i class="fa fa-user-plus"></i>
                        </h5>
    
                        <div class="sub-nav hidden" >
                            <span></span>
                            <ol>
                                <li><a href="admin-user.html" target="mainFream">用户查询</a></li>
                                <li>用户统计</li>
                            </ol>
                        </div>
    
                    </li>
                    <li> 
                        <h5> 
                            <i class="fa fa-home"></i>   
                        </h5>
    
                        <div class="sub-nav hidden">
                            <ol>
                                <li><a href="admin-article.html" target="mainFream">文章查询</a></li>
                                <li>文章统计</li>
                            </ol>                            
                        </div>
    
                    </li>
                </ul>
            </aside>
    
            <article class="article">
                
                <iframe name="mainFream" src="admin-user.html" width="100%" height="500px" frameborder="0"> </iframe>
            </article>
    
        <footer>
    
        </footer>
    </body>
    </html>

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZQkRFU0hJSklF_size_16_color_FFFFFF_t_70]: /images/20210502/a73f57b03aee4401adf88f7c45440dca.png