下拉菜单是网页开发中常用的交互元素之一,而在下拉菜单中,下拉三角符号也是经常出现的视觉元素。下面,本文将介绍如何使用CSS来实现下拉三角符号的输入方法。 首先,需要创建一个div容器,用来包含下拉菜单
<div class="menu"> <a href="#" class="dropbtn">菜单 <i class="fa fa-caret-down"></i></a> <div class="dropdown-content"> <a href="#">选项1</a> <a href="#">选项2</a> <a href="#">选项3</a> </div> </div> <br> <style> .menu { position: relative; display: inline-block; } <br> .dropbtn { display: inline-block; color: #333; text-align: center; text-decoration: none; padding: 12px; font-size: 16px; border: none; outline: none; background-color: transparent; cursor: pointer; } <br> .dropdown-content { display: none; position: absolute; z-index: 1; min-width: 160px; background-color: white; border: 1px solid #ddd; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } <br> .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } <br> .menu:hover .dropdown-content { display: block; } <br> .fa-caret-down { font-size: 0.5em; margin-left: 5px; } <br> </style>
粉丝
0
关注
0
收藏
0