css创建鼠标悬停下拉菜单样式

最新推荐文章于 2022-10-12 17:27:13 发布

iteye_17819

最新推荐文章于 2022-10-12 17:27:13 发布

阅读量491

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/iteye_17819/article/details/82674707

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

下拉菜单在网站中到处可见。

下面用css设置下拉菜单样式。

<!DOCTYPE html>
<html>
<head>
<title>淘宝</title>
<meta charset="utf-8">
<body>
<div class=dropdown>
    <button class="dropbtn">我的淘宝</button>
       <div class="dropdown-content">
           <a href="#">已买到的宝贝</a>
           <a href="#">我的足迹</a>
       </div>
</div>
</body>
</html>

css来设置样式

.dropdown-content {
    display: none;//隐藏下拉菜单的内容
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;最小宽度
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);//做边框阴影
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
//hover设置光标悬停未点击之前的样式

.dropdown:hover .dropdown-content {
    display: block;
}//鼠标悬停显示下拉菜单

.dropdown:hover .dropbtn {
    background-color: #f5f5f5;
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

iteye_17819

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css创建鼠标悬停下拉菜单样式

下拉菜单在网站中到处可见。下面用css设置下拉菜单样式。&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;title&gt;淘宝&lt;/title&gt;&lt;meta charset="utf-8"&gt;&lt;body&gt;&lt;div class=dropdown&
复制链接

扫一扫