搜索

技术笔记 下拉菜单笔记

一定 2022-07-30
今天想给网站的书签搞个下拉菜单,折腾了很久,我上学都没这么认真,这边做个笔记,方便以后查看。

先放html代码

[HTML] 纯文本查看 复制代码
<ul class="nav" style="background: #59D192;">
<li class="drop-down">
<a href="javascript:void(0)" class="menu">我的书签<p></p></a>
<ul class="drop-down-content">
<li><a href="#" style="background: #59D192;">收藏贴子</a></li>
    <li><a href="#" style="background: #59D192;">收藏板块</a></li>
</ul>
</li>
</ul>


[CSS] 纯文本查看 复制代码
<style>
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul li a {
display: block;
text-decoration: none;
width: 100px;
height: 50px;
text-align: center;
line-height: 50px;
color: white;
}

ul li a.menu {
background: #59D192;
}

.nav {
    width: 500px;
    margin: 0 auto;
    display: flex;
}
 
 .drop-down {
    width: 100px;
    height: 50px;
    margin: 0 0 0 150px;
}
 
.drop-down-content {
opacity: 0;
height: 0;
overflow: hidden;
transition: all 1s ease;
}

.drop-down-content li:hover a {
background-color: red;
}

.nav .drop-down:hover .drop-down-content {
opacity: 1;
height: 160px;
}
</style>

使用道具 举报

您需要登录后才可以回帖 立即登录
穿越到宋朝,开局遇到十万金军围城?《回到宋朝当暴君
共收到 0 条点评
返回顶部