css实现二级菜单,css二级菜单滑出显示

本章介绍css如何实现二级菜单效果。水平、垂直菜单的实现(代码实例)。用html css代码制作两种不同的二级菜单效果有一定的参考价值，希望有需要的朋友可以参考，对你有帮助。

一. css实现水平的二级菜单风格

css实现级别的辅助菜单代码：

二级菜单---二级*{margin: 0； padding: 0； }

. demo{background: red； width: 100%； height: 35px； }

nav{height: 35px； width: 1000px； margin : 0自动； }

navul Li { list-style-type : none；浮动：左}

navul lia {文本修饰： none；显示： block； width: 130px； line-height: 35px；文本对齐3360中心； color:白色； font-fimily:微软雅黑； }

nav ul Li ul Li {浮动： none }

nav ul li ul li a{color:black}

nav ul li ul{display: none； }

navul Li : hover ul { display : block； }

菜单1菜单1菜单1菜单1菜单1菜单1菜单2菜单2菜单2菜单2菜单2菜单3菜单3菜单3菜单4菜单4菜单4菜单4菜单5菜单5菜单5菜单5菜单6菜单6菜单6菜单6

鼠标没有向上移动：

将鼠标移动到菜单1上：

从上面的示例中可以看到，css的display属性用于控制辅助下拉菜单的显示。当鼠标移动到1级菜单的li选项卡时，将显示2级菜单的ul选项卡。

核心代码：

删除list-style-type :非点。

float:left-向左浮动，使1级菜单水平显示。

:hover-允许您选择鼠标指针所在的元素。

display:none-隐藏2级菜单。

display:block -将链接显示为块元素，以便可以单击整个链接区域(而不是文本)并指定宽度。

首先隐藏2级菜单，将鼠标移动到1级菜单的li选项卡上，将显示2级菜单的ul选项卡。

二、css实现垂直的二级菜单风格

css实现垂直的辅助菜单代码：

二级菜单---垂直机身{ font-family : verdana； font-size: 12px； line-height: 1.5； }

img { border-style: none； }

a { color: #000；文本修饰：无； }

a:hover { color: #F00； }

#menu { width: 200px； border : 1px固态# CCC；边框- bottom : none； margin :50 px自动；文本对齐3360中心； }

#菜单UL { list-style : none； margin: 0px； padding: 0px； }

# menu ulli {后台： # 289 CFF； color: #fff； padding: 0px 10px； height: 26px； line-height: 26px； border-bottom : 1px固态# CCC； position:relative； }

#menu ul li ul { display:none；位置： absolute； left: 200px； top: 0px； width:100px； border :1 px固态# CCC；边框- bottom : none； }

# menulliulli { background-color : # 21 B4 bb }

# menu ulli : hover { background-color : # 21 B4 bb }

# menu ulli : hover ul { display : block； }

菜单1

菜单2

菜单3

效果图表：