纯CSS制作红色网站二级下拉导航菜单

纯CSS制作红色网站二级下拉导航菜单

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;
}

 

效果演示:

提示:你可以先修改部分代码再运行。

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/3471.html

(4)
上一篇 2019年4月12日 上午8:05
下一篇 2019年4月19日 下午3:06

99%的人还看了以下文章

发表评论

登录后才能评论