CSS 下拉菜单
CSS 下拉菜单
日期:2022-07-05
本文字数:240 字 阅读完需:约 2 分钟
CSS 下拉菜单
使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果。
下拉菜单实例
实例演示 1
文本下拉菜单
菜鸟教程
实例演示 2
下拉菜单
菜鸟教程 1 菜鸟教程 2 菜鸟教程 3
实例演示 3
![Trolltunga Norway][]
![Trolltunga Norway][]
学的不仅是技术,更是梦想!
基本下拉菜单
当鼠标移动到指定元素上时,会出现下拉菜单。
实例
< style > .dropdown { position: relative ; display: inline-block ; } .dropdown-content { display: none ; position: absolute ; background-color: #f9f9f9 ; min-width: 160 px ; box-shadow: 0 px 8 px 16 px 0 px rgba ( 0 , 0 , 0 , 0.2 ) ; padding: 12 px 16 px ; } .dropdown :hover .dropdown-content { display: block ; } </ style > [ mycode3 ] [ mycode3 type = " html " ] < div class =" dropdown "> < span >鼠标移动到我这!</ span > < div class =" dropdown-content "> < p >菜鸟教程</ p > < p > www .runoob .com </ p > </ div > </ div >
尝试一下 »
实例解析
HTML 部分:
我们可以使用任何的 HTML 元素来打开下拉菜单,如:, 或 a
尝试一下 »
下拉内容对齐方式
float:left;
左
菜鸟教程 1 菜鸟教程 2 菜鸟教程 3
float:right;
右
菜鸟教程 1 菜鸟教程 2 菜鸟教程 3
如果你想设置右浮动的下拉菜单内容方向是从右到左,而不是从左到右,可以添加以下代码 right: 0;
实例
.dropdown-content {
right: 0;
}
尝试一下 »
更多实例
图片下拉
该实例演示了如何如何在下拉菜单中添加图片。
导航条下拉
该实例演示了如何在导航条上添加下拉菜单。
[Trolltunga Norway]: