元素来包裹这些元素，并使用 CSS 来设置下拉内容的样式。

 

　　CSS 部分：

 

　　。dropdown?类使用？position:relative, 这将设置下拉菜单的内容放置在下拉按钮 （使用？position:absolute） 的右下角位置。

 

　　。dropdown-content?类中是实际的下拉菜单。默认是隐藏的，在鼠标移动到指定元素后会显示。 注意？min-width?的值设置为 160px。你可以随意修改它。？注意：?如果你想设置下拉内容与下拉按钮的宽度一致，可设置？width?为 100% （？overflow:auto设置可以在小尺寸屏幕上滚动）。

 

　　我们使用？box-shadow?属性让下拉菜单看起来像一个"卡片"。

 

　　：hover?选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。

 

　　下拉菜单

 

　　创建下拉菜单，并允许用户选取列表中的某一项：

 

　　下拉菜单

 

　　这个实例类似前面的实例，当我们在下拉列表中添加了链接，并设置了样式：

 

　　实例

 

　　。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）;

 

　　}

 

　　。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;

 

　　}

 

　　下拉菜单

 

　　菜鸟教程 1

 

　　菜鸟教程 2

 

　　菜鸟教程 3

 

　　尝试一下 ?

 

　　下拉内容对齐方式

 

　　float:left;

 

　　左

 

　　float:right;

 

　　右

 

　　如果你想设置右浮动的下拉菜单内容方向是从右到左，而不是从左到右，可以添加以下代码？right: 0;

 

　　实例

 

　　。dropdown-content{

 

　　right:0;

 

　　}

 

　　尝试一下 ?

 

　　更多实例

 

　　图片下拉

 

　　该实例演示了如何如何在下拉菜单中添加图片。

 

　　导航条下拉

 

　　该实例演示了如何在导航条上添加下拉菜单