悬停下拉列表

最新推荐文章于 2023-12-12 08:43:56 发布

LinRuoZhuo

最新推荐文章于 2023-12-12 08:43:56 发布

阅读量501

点赞数 1

分类专栏：前端代码杂记文章标签： HTML+css

本文链接：https://blog.csdn.net/LinRuoZhuo/article/details/79457713

版权

前端代码同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

杂记

5 篇文章 0 订阅

订阅专栏

<html>

<head>
<title>我的第一个 HTML 页面</title>
<style>
ul{
list-style: none;
}
ul a{
display: block;
text-decoration: none;
width: 100px;
height: 50px;
text-align: center;
line-height: 50px;
color: white;
background-color: #2f3e45;
}
.nav>li:first-child a{
border-radius: 10px 0 0 10px;
}
.nav>li:last-child a{
border-radius: 0 10px 10px 0;
}
.drop-down{
position: relative;
}
.drop-down-content{
padding: 0;
display: none;
position: absolute;
}

h3{
font-size: 30px;
clear: both;
}
.drop-down-content li:hover a{
background-color:red;
}
.nav .drop-down:hover .drop-down-content{
display: block;
}
</style>
</head>

<body>
 <ul class="nav">
         <li class="drop-down"><a href="#">下拉菜单</a>
           <ul class="drop-down-content">
                <li><a href="#">我是1</a></li>
                <li><a href="#">我是2</a></li>
                <li><a href="#">我是3</a></li>
             </ul>
       </li>
    </ul>
    <h3>我是测试文字</h3>
</body>

</html>

亲测可用，直接放到项目中既可以了。最好将css单独抽出来，以防与你的其它代码的样式冲突

优惠劵

LinRuoZhuo

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
悬停下拉列表

&lt;html&gt;&lt;head&gt;&lt;title&gt;我的第一个 HTML 页面&lt;/title&gt;&lt;style&gt;ul{list-style: none;}ul a{display: block;text-decoration: none;width: 100px;height: 50px;text-align: center;l...
复制链接

扫一扫