【用hover实现折叠菜单 _hover 】

用hover实现折叠菜单
我也踩过这个坑( 1 )
已统计您的踩坑,无需重复点击
回答(0)
hover
详细描述
截图
代码
<!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>Document</title>

<style>
    /* nav */
ul,li{
    list-style: none;
}
.xiuzhenyuan{
    display: inline-block;
}    
.nav {
    position: relative;
    margin: 20px 0;
}
.menu{
    display: inline-block;
    position: absolute;
    right: 0px;
}
.nav ul {
    margin: 0;
    padding: 0;
}
.nav li {
    margin: 0 5px 10px 0;
    padding: 0;
    list-style: none;
    display: inline-block;
}
.nav a {
    padding: 3px 12px;
    text-decoration: none;
    color: #999;
    line-height: 100%;
}
.nav a:hover {
    color: #000;
}

button div{
    width: 15px;
    height: 2px;
    background: gray;
    margin-bottom: 1px;

}
button{
    display: none;
}
.collapsed-menu{
        display: none;
    }


/* <!-- 媒体查询 --> */
@media screen and (max-width: 768px) {
    
    button{
        display: block;
        display: inline-block;
        position: absolute;
        right: 0;
    }

    button:hover.collapsed-menu{
        display: block;
    }

    .menu{
        display: none;
    }
    
    .nav.center ul {
        left: 50%;
        margin-left: -90px;
    }
} 

.collapsed-menu li{
    color: gray;
    padding: 5px 0;
}

.collapsed-menu{
    width: 100px;
    height: 150px;
    border: 1px solid #dedede;
    border-radius: 10px;
    position: absolute;
    right: 0;
}


</style>



</head>
<body>
    
<nav class="nav">
<div class="xiuzhenyuan">修真院|技能树</div>

<button>
    <div></div>
    <div></div>
    <div></div>
</button>

<ul class="menu">
    <li><a href="#">首页</a></li>
    <li><a href="#">职业</a></li>
    <li><a href="#">推荐</a></li>
    <li><a href="#">关于</a></li>
</ul>
</nav>

<ul class="collapsed-menu">
    <li>首页</li>
    <li>职业</li>
    <li>推荐</li>
    <li>关于</li>
</ul>



</body>
</html>
编辑于2024-11-23