CSS 基础学习-201 CSS 可悬停的下拉菜单

由 hrs, 11 四月, 2023

实例代码：

                                                                        
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            .dropdown{
                position:relative;/*相对定位*/
                display:inline-block;   /*显示为行块元素*/
            }
            .dropdown-content{
                display:none;
                position:absolute; /*绝对定位*/
                background-color:#f9f9f9;
                min-width:160px;  /*菜单宽度*/
                box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2); /*设置位移量和阴影*/
                z-index:1 ; /*重叠显示*/
                text-align:center;
            }       
            .dropdown:hover  .dropdown-content{
                display:block;
            }   
        </style>
    </head>
    <body>
        <h1>可悬停的下拉菜单</h1>
        <p>请把鼠标移到文本上，已查看下拉内容</p>
        <div class="dropdown"> 
        <span>把鼠标移到我上面</span>
    
            <div class="dropdown-content">
        <p>Hello World!</p>
            </div>
            
        </div>
    
    </body>
</html>

运行效果：

css-201.png

标签

评论