CSS下拉菜单是现代网站设计中常见的元素之一。下面将介绍两种制作CSS下拉菜单的方法。 一. 使用CSS hover属性 我们可以使用CSS中的:hover属性来实现下拉菜单的效果。首先,我们需要创建
<style> .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; z-index: 1; } .dropdown:hover .dropdown-content { display: block; } </style> <br> <div class="dropdown"> <a href="#">菜单</a> <div class="dropdown-content"> <a href="#">选项1</a> <a href="#">选项2</a> <a href="#">选项3</a> </div> </div>
<style> .dropdown { position: relative; display: inline-block; } .dropdown-checkbox { display: none; } .dropdown-content { display: none; position: absolute; z-index: 1; } .dropdown-checkbox:checked + .dropdown-content { display: block; } </style> <br> <div class="dropdown"> <label for="dropdown-checkbox">菜单</label> <input type="checkbox" id="dropdown-checkbox" class="dropdown-checkbox"> <div class="dropdown-content"> <a href="#">选项1</a> <a href="#">选项2</a> <a href="#">选项3</a> </div> </div>
粉丝
0
关注
0
收藏
0