CSS 下拉菜单

实际场景中,需要使用下拉菜单来展示更多信息。

CSS - 下拉菜单

下拉菜单1.png

图1

用到定位,需要最外层设置:

div{
	position: relative;
}

隐藏块,也就是我们要显示的内容,里面经常为列表项:

ul{
	position: absolute;
	top: 35px; 
	left: 0;
}

要用到 hover :

ul{
	display: none;
}
div:hover ul{
	display: block;
}

详情请查看 图1代码

CSS - 下拉菜单 & 侧边栏

下拉菜单2.png

图2

在下拉菜单的基础上修改为侧边栏 。主要是定位的不同

.dropdown-vertical-box .dropdown-menu{
	position: absolute; 
	top: 0px;
	left: 140px; 
}

详情请查看 图2代码