小编给大家分享一下html如何实现下拉菜单,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
元素来包裹这些元素,并使用 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;
}
下拉内容对齐方式
float:left;
左
float:right;
右
如果你想设置右浮动的下拉菜单内容方向是从右到左,而不是从左到右,可以添加以下代码?right: 0;
实例
。dropdown-content{
right:0;
}
以上是“html如何实现下拉菜单”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。