CSS 下拉菜单
-
基本下拉列表
创建一个下拉框,当用户将鼠标移到元素上时会出现该下拉框。
尝试一下<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(cainiaoya.com)</title> <style> .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); padding: 12px 16px; z-index: 1; } .dropdown:hover .dropdown-content { display: block; } </style> </head> <body> <h2>悬停下拉</h2> <p>将鼠标移到下面的文本上以打开下拉菜单内容。</p> <div class="dropdown"> <span>鼠标悬停在我这里</span> <div class="dropdown-content"> <p>Hello World!</p> </div> </div> </body> </html>
示例说明:
HTML使用任何元素打开下拉内容,例如<span>或<button>元素。使用容器元素(如<div>)创建下拉内容并在其中添加任何内容。在元素周围包裹<div>元素,以使用CSS正确定位下拉内容。
CSS)的.dropdown类使用position:relative,当我们要下拉的内容要放在正下方的下拉按钮(使用这是需要position:absolute)。.dropdown-content类保存实际下拉内容。它默认是隐藏的,并将在悬停时显示(见下文)。请注意,min-width它设置为160px。随意改变这一点。提示:如果您希望下拉内容的宽度与下拉按钮一样宽,请将其设置width为100%(并用overflow:auto在小屏幕上启用滚动)。我们使用CSS box-shadow属性使下拉菜单看起来像“卡片” ,而不是使用边框。:hover选择器被用来显示在下拉菜单中,当用户在该下拉按钮移动鼠标。 -
下拉式菜单
创建一个下拉菜单,允许用户从列表中选择一个选项:
尝试一下<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(cainiaoya.com)</title> <style> .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover {background-color: #f1f1f1} .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: #3e8e41; } </style> </head> <body> <h2>下拉菜单</h2> <p>将鼠标移到按钮上以打开下拉菜单。</p> <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> <p><strong>注意:</strong> 我们使用href="#"作为测试链接。在真实的web站点中,这是url。</p> </body> </html>
-
相关页面
HTML教程:HTML样式