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

 

效果演示:





纯CSS制作红色网站二级下拉导航菜单|www.125jz.com




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

(4)
江山如画的头像江山如画管理团队
上一篇 2019年4月12日 上午8:05
下一篇 2019年4月19日 下午3:06

99%的人还看了以下文章

  • 中国省、市区二级联动下拉选择框-JS源码

    中国省、市区二级联动下拉选择框,包含所有省份及市县信息。 当选择省份下拉选择框时,市区的下拉框会根据选择的省市加载出来。如上图所示选择“山东省”,市的下拉选择框只会出现山东省的市县。 1.把中国省份和市区的信息放到JavaScript文件里(js/common.js),中国网页设计在js文件里定义了两个数组,分别存放省份和对应的市区。 //省份 var pr…

    2019年6月5日
    3.8K0
  • 跟永哥学HTML5(6):H5表单及表单验证

    表单在网页中主要负责数据采集功能。HTML 5一个令人兴奋的发展领域是新的Web表单。
    在今天的课程中你会看到浏览器会验证所需的字段,数据类型,如电子邮件、网址和任何模式,而不使用任何JavaScript。

    2018年2月27日
    2.8K0
  • 第11课:表格的高级特性

    表格还有哪些相关属性? colspan和rowspan这两个属性用于创建特殊的表格。colspan是“column span(跨列)”的缩写。colspan属性用在<td>标签中,用来指定单元格横向跨越的列数: 例1: <table border=”1″> <tr><td colspan=”3″>单元格1&lt…

    2018年1月19日
    1.8K0
  • Less编写及使用快速入门

    前面我们学习了《4个案例入门,学会LESS使用》,今天一起来学习如何编写,编译并使用LESS LESS的编写 LESS的使用是很容易的,使用你最常使用的代码编辑器,按LESSCSS的语法规则写好.less文件,接下来,使用编译工具它编译成.css,最后再引入页面即可。 LESS的编译 GUI编译工具 为方便起见,建议初学者使用GUI编译工具来编译.less文…

    2019年7月17日
    1.9K0
  • Flex布局“弹性盒子”

    一.概念 flex布局: Flex Box 的缩写,意味“灵活的盒子”或“弹性盒子”,所以flex布局又称“弹性布局”。 flex容器 采用flex布局的元素,成为flex容器。display:flex; flex项目 flex容器的所有子元素自动成为容器成员,称为flex项目。 <div style=“ display:flex;”>   &l…

    2020年4月12日
    2.7K0
  • 3个超酷的CSS3图片动画特效:图片变圆角,放大,旋转

    本实例制作需要学习《CSS3 transition transform属性及实例详解》,学完后可先练习CSS3 transform:rotate()制作旋转图片 See the Pen 三个CSS3图片动画特效 by 江山如画 (@jgyzhr)on CodePen.

    2020年1月1日
    1.6K0

发表回复

登录后才能评论