前端小练习之CSS二级菜单

原创已于 2023-10-20 14:35:23 修改 · 328 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #css

于 2023-10-20 14:32:28 首次发布

介绍

利用定位实现tab切换效果，当鼠标经过菜单，显示该菜单对应的div内容。

主要如下：

将ul（.nav）当作父级设置成positon：relative；

要显示div内容（.navdiv）设置positon：absolute；

宽度一致（.nav是400px；.navdiv是398px+2px（border的宽度）

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
             margin: 0;
            padding: 0;
        }
        .nav{
            margin: 10px auto;
            width:407px;
            height: 50px;
            position: relative;
        }
        .nav li{
            float: left;
            width: 100px;
            line-height: 50px;
            list-style: none;
            text-align: center;
            background-color: rgb(84, 182, 207);
            border-top-left-radius: 40%;
            border-top-right-radius: 40%;
           
         
        }
       .navdiv{
        width: 398px;
        height: 400px;
         position: absolute;
         top: 50px;
         left: 0;
         display: none;
         border: 1px solid  rgb(84, 182, 207);
      }
      .nav>li:hover div{
        display: block;
      }
    </style>
</head>
<body>
   
        <ul class="nav">
            <li>菜单1
                <div class="navdiv">内容1</div>
            </li>
            <li>菜单2
                <div class="navdiv">内容2</div>
            </li>
            <li>菜单3
                <div class="navdiv">内容3</div>
            </li>
            <li>菜单4
                <div class="navdiv">内容4</div>
            </li>
        </ul>
    
  
</body>
</html>