HTML 下拉列表

最新推荐文章于 2024-09-10 13:54:44 发布

m0_46359350

最新推荐文章于 2024-09-10 13:54:44 发布

阅读量284

点赞数

分类专栏： html 文章标签： html css3 css

本文链接：https://blog.csdn.net/m0_46359350/article/details/121398793

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<html>
<head>
<title>下拉列表</title>
<style>
.dropdown{
   position:relative;
   display:inline-block;
}
.dropdown-content{
   display:none;
   background-color:grey;
   position:absolute;
   border:1px solid red;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown:hover .dropdown-content{
   display:inline;
}
.dropdown-content a{
   display:block;
   text-align:center;}

.dropdown-content:hover a{text-decoration:none;background-color:yellow;}
.dropdown-content a:hover{
background-color:pink;
color:green;
}
a:hover{display:block;}
</style>
</head>
<body>
<div class="dropdown">
<div style="border:4px solid purple;">浏览器</div>
<div class="dropdown-content" >
<a href="http://www.baidu.com">百度</a>
<a href="http://www.google.com">谷歌</a>
<a href="http://www.hao123.com">hao123</a>
</div>
</div>
</body>
</html>