今天我们来学习如何使用CSS制作带阴影效果的下拉菜单。下拉菜单是网页中经常使用的一种元素,可以让用户方便地选择他们需要的项目。通过给下拉菜单添加阴影效果,不仅可以让其更具有立体感,也可以让菜单更加突出
<!-- 下拉菜单 --> <div class="dropdown"> <button class="dropbtn">菜单</button> <div class="dropdown-content"> <a href="#">项目1</a> <a href="#">项目2</a> <a href="#">项目3</a> </div> </div>
/* 下拉菜单样式 */ .dropdown { position: relative; display: inline-block; } <br> /* 下拉按钮样式 */ .dropbtn { background-color: #fff; color: #333; padding: 10px; font-size: 16px; border: none; outline: none; cursor: pointer; } <br> /* 下拉框样式 */ .dropdown-content { display: none; position: absolute; z-index: 1; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); background-color: #fff; min-width: 160px; } <br> /* 鼠标悬停在下拉按钮上时,下拉框显示 */ .dropdown:hover .dropdown-content { display: block; } <br> /* 下拉框项目样式 */ .dropdown-content a { color: #333; padding: 12px 16px; text-decoration: none; display: block; } <br> /* 鼠标悬停在下拉框项目上时,背景色改变 */ .dropdown-content a:hover { background-color: #f9f9f9; }
粉丝
0
关注
0
收藏
0