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

 

效果演示:

Tips:You can change the code before run.

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

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

99%的人还看了以下文章

  • CSS3动画:@keyframes animation 案例——制作滚动公告

    滚动公告的制作请参阅:Marquee标签实现跑马灯、滚动公告、通知效果 今天我们使用CSS3的@keyframes和animation 制作滚动文字公告。 @keyframes规则 @keyframes 规则用于创建动画。在@keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。 注释:当动画完成后,动画的状态会回到初始状…

    2019年2月26日
    6.2K0
  • 响应式布局和自适应的区别

    客户端,PC、平板、手机,各种尺寸,要给电脑PC和手机分别设计不同的网页吗?要给每一个手机分别设计一个网页吗? 不需要,因为有了响应式布局。 响应式布局被大家熟知的一个重要原因就是Twitter开源了bootstrap。。 响应式布局和自适应的区别: 自适应是为了解决如何才能在不同大小的设备上呈现相同的网页。 手机的屏幕比较小,宽度通常在600像素以下,pc…

    2019年10月15日
    2.5K0
  • 第1课:开始学习HTML

    建议你每天学习2到3课,然后花点时间来实验你所学到的新知识。 学习制作网站是件充满乐趣的事,而且一旦掌握它,你便会感到无比满足。好的,不多说,我们现在就开始吧! 这第一课中,我们简要介绍制作网站所需的工具。 需要哪些工具? “浏览器(browser)”你有了,它是用于浏览网站的程序。你现在就是通过浏览器在观看本页面的。 也许你听说过、甚至用过一些网页制作工具…

    2018年1月20日
    4.4K0
  • 导航特效:纯CSS实现始终显示在页面顶部的导航条

    今天给大家分享的导航特效是始终显示在页面顶部的导航条,随着页面滚动,导航条始终显示的屏幕上方。

    2018年2月12日
    3.7K0
  • Flex布局“弹性盒子”

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

    2020年4月12日
    3.0K0
  • 100种精美的网页时钟特效,总有一款是你需要的

    web骇客收集了100种使用CSS+JS+HTML制作的时钟、钟表、手表等特效,分为漂亮的时钟特效、有创意的时钟、电子钟,每一种实现都提供源代码,可以方便网页制作爱好者们拷贝使用,如果你需要在网页中添加时钟特效,在这里一定会有一款你喜欢的。

    2018年9月27日
    6.8K0

发表回复

登录后才能评论