纯CSS制作红色网站二级下拉导航菜单，代码非常简洁，适合修改后使用，入门就能掌握。
二级下拉导航菜单HTML代码：
<nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">电影</a> <ul> <li><a href="#">新上映</a></li> <li><a href="#">华语</a></li> <li><a href="#">欧美</a></li> <li><a href="#">日韩</a></li> <li><a href="#">电影排行榜</a></li> </ul> </li> <li><a href="#">音乐</a> <ul> <li><a href="#">新歌首播</a></li> <li><a href="#">华语</a></li> <li><a href="#">欧美</a></li> <li><a href="#">日韩</a></li> <li><a href="#">音乐排行榜</a></li> </ul> </li> <li><a href="#">科技</a> <ul> <li><a href="#">互联网</a></li> <li><a href="#">IT业界</a></li> <li><a href="#">移动互联</a></li> </ul></li> <li><a href="#">财经</a> <ul> <li><a href="#">财经快讯</a></li> <li><a href="#">证券要闻</a></li> <li><a href="#">财经专题</a></li> </ul></li> </ul> </nav>
可见二级菜单，使用的无序列表嵌套完成，代码非常简洁。
CSS代码：
body,ul,li{
margin:0;
padding:0; /*清除默认外边距、内边距*/
}
nav{
width:960px;
margin:0 auto; /*定义导航宽度，水平居中*/
}
nav ul {
list-style: none; /*去掉列表符号*/
}
nav ul li{
float:left; /*水平排列*/
position:relative; /*父级元素相对定位*/
}
nav ul li ul{
position:absolute;/*子元素绝对定位*/
display:none; /*默认情况下不显示*/
left:0; /*子元素相对父元素，left:0位置显示，二级菜单和上级一级菜单项左对齐*/
}
nav ul li:hover ul{
display:block;/*鼠标放上去，显示下拉菜单*/
}
nav a:link,a:visited{/*定义菜单项样式*/
width:191px;
display:block;
padding:10px 0;
text-decoration:none;
background-color:#c11136;
margin-right:1px;
color: #FFF;
text-align:center;
}
nav a:hover{/*鼠标放上去时背景颜色变化*/
background-color:#F00;
}
效果演示：
Tips:You can change the code before run.
125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/3471.html
微信扫一扫 
支付宝扫一扫 