纯css实现的下拉导航栏

最新推荐文章于 2022-02-06 10:31:34 发布
最新推荐文章于 2022-02-06 10:31:34 发布
阅读量614 收藏 3
点赞数 1
文章标签： css 导航
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/g5231315/article/details/22115241
版权 
这里是html文件
<!DOCTYPE html>
<html>
  <head>
    <title>导航栏</title>
	
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" type="text/css" href="css/navigator.css">
  </head>
  
  <body>
    <div class="navigator">
    	<ul>
    		<li>
    			<a href="#">AAAA</a>
    			<ul>
    				<li><a href="#">A1</a></li>
    				<li><a href="#">A2</a></li>
    				<li><a href="#">A3</a></li>
    				<li><a href="#">A4</a></li>
    				<li><a href="#">A5</a></li>
    				<li><a href="#">A6</a></li>
    			</ul>
    		</li>
    		<li>
    			<a href="#">BBBB</a>
    			<ul>
    				<li><a href="#">B1</a></li>
    				<li><a href="#">B2</a></li>
    				<li><a href="#">B3</a></li>
    				<li><a href="#">B4</a></li>
    				<li><a href="#">B5</a></li>
    				<li><a href="#">B6</a></li>
    			</ul>
    		</li>
    		<li>
    			<a href="#">CCCC</a>
    			<ul>
    				<li><a href="#">C1</a></li>
    				<li><a href="#">C2</a></li>
    				<li><a href="#">C3</a></li>
    				<li><a href="#">C4</a></li>
    				<li><a href="#">C5</a></li>
    				<li><a href="#">C6</a></li>
    			</ul>
    		</li>
    		<li>
    			<a href="#">DDDD</a>
    			<ul>
    				<li><a href="#">D1</a></li>
    				<li><a href="#">D2</a></li>
    				<li><a href="#">D3</a></li>
    				<li><a href="#">D4</a></li>
    				<li><a href="#">D5</a></li>
    				<li><a href="#">D6</a></li>
    			</ul>
    		</li>
    		<li>
    			<a href="#">EEEE</a>
    			<ul>
    				<li><a href="#">E1</a></li>
    				<li><a href="#">E2</a></li>
    				<li><a href="#">E3</a></li>
    				<li><a href="#">E4</a></li>
    				<li><a href="#">E5</a></li>
    				<li><a href="#">E6</a></li>
    			</ul>
    		</li>
    		<li>
    			<a href="#">FFFF</a>
    			<ul>
    				<li><a href="#">F1</a></li>
    				<li><a href="#">F2</a></li>
    				<li><a href="#">F3</a></li>
    				<li><a href="#">F4</a></li>
    				<li><a href="#">F5</a></li>
    				<li><a href="#">F6</a></li>
    			</ul>
    		</li>
    		<li>
    			<a href="#">GGGG</a>
    			<ul>
    				<li><a href="#">G1</a></li>
    				<li><a href="#">G2</a></li>
    				<li><a href="#">G3</a></li>
    				<li><a href="#">G4</a></li>
    				<li><a href="#">G5</a></li>
    				<li><a href="#">G6</a></li>
    			</ul>
    		</li>
    	</ul>
    </div>
  </body>
</html>

下面是css文件

.navigator{/*当然，宽度可以你自己定义*/
	width: 100%;
	margin: 0;
}
.navigator ul{/*这里必须设置内边距和外边距，因为浏览器会自动给ul设定值，会把导航栏挤歪*/
	padding: 0;
	margin: 0;
	list-style-type: none;
}
.navigator li{/*本来ul是竖直排列的，对所有li元素进行float:left他就会自动全部靠左*/
	float: left;
	position :relative;
}
.navigator ul li a,.navigator ul li a:visited {/*这里设置text-decoration是为了防止a标签自己的样式*/
	display: block;
	text-align: center;
	text-decoration: none;/*不对文本设置效果 */
	width: 184px;/*每一块的宽度*/
	height: 50px;/*每一块的高度*/
	color: black;/*文字颜色 */
	border: 1px solid #fff;/*边框大小和颜色 */
	border-width: 1px 1px 0 0;/*四个边框的宽度 ,注意，左右边框没有像素哦，仔细看导航栏左右有缝隙*/
	background: #CCCCCC;/*背景颜色 */
	line-height: 50px;/*这是一个技巧，这里将height和line-height设置为一样的高度文字就会水平竖直居中 */
	font-size: 17px;
}
.navigator ul li:hover a {/*这是一个css伪类，将鼠标移上去的时候字体和背景都会变色，移开又会变回来 */
	color: #fff;
	background: #CCCCFF;
}
.navigator ul li ul {/*这里是为了将导航栏里的内容隐藏*/
	display: none;
}
.navigator ul li:hover ul {/*这里就是弹出的下拉菜单了*/
	display: block;
	position: absolute;
	top: 51px;
	left: 0;
	width: 185px;
}
.navigator ul li:hover ul li a {/*这里当然是定义下拉菜单里的a标签了*/
	display: block;
	background: #CCFFFF;
	color: #000;
}
.navigator ul li:hover ul li a:hover {/*这个是伪类，上面有说*/
	background: #dfc184;
	color: #000;
}

把css文件和html文件放在一个目录下就可以看了，有不妥的地方还请指正

简叶一枚
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
纯css实现的下拉导航栏附html结构及css样式
09-25
下拉导航栏想必大家并不陌生吧，在之前或许都是使用js或jquey之类的脚本来实现的，而如今，使用纯css也可以实现了，下面是成功制作的示例，大家可以参考下
jQuery楼层导航
最新发布
xh200303的博客
12-18 50
最后把这些代码编写到一个文件里楼层导航就做好了。
纯css下拉导航栏
qq_37377764的博客
10-14 362
二级菜单栏body部分格式，也可通过遍历显示 <body> <div class="com"> <ul class="level"> <li> //可以换成a标签，要更改一些a标签特定样式，也可以遍历时添加点击事件 <div>首页&l...
纯CSS实现下拉导航菜单代码
weixin_42645716的博客
11-05 1164
纯css实现，鼠标划过显示二级菜单。二级菜单自上至下滑入。 <!doctype html> <html class="no-js" lang="en"> <head> <meta charset="utf-8"> <title>纯CSS3-红色下拉导航菜单代码</title> <style> /*导航栏*/ .n...
使用 CSS 创建下拉导航栏
allway2的博客
02-06 5105
下拉菜单有一个可以通过单击选择的项目列表。我们可以使用 HTML 元素和 CSS 创建一个下拉列表。所以，让我们学习创建一个下拉菜单。 创建下拉列表 可以使用<div>容器和<button>标签来创建下拉菜单以切换下拉菜单。该<a>标签用于在 <div> 中创建链接列表。 使用position:absolute下拉菜单和position:relative下拉内容，以便下拉菜单位于按钮下方。 使用box-shadow属性像卡片一样自定义下拉菜单。 当用
纯CSS实现导航栏下拉动画效果
pig_pig32的博客
08-11 6027
实现思路 导航栏的下拉效果通过在ul的li里再嵌套一个ul，再通过animation属性改变第二导航栏ul的高度来实现导航栏下拉动画效果。老铁没毛病。 实现效果： HTML代码 <div class="nav"> <ul> <li> <a href="#">奥利给</a> <ul class="son"> <li><a href="#">雷霆嘎巴</a>
纯css实现水平下拉导航菜单
04-07
纯css实现水平下拉导航菜单是一款css导航菜单制作下拉三级菜单代码下载。
纯CSS实现漂亮的下拉导航效果代码
12-13
本文实例讲述了纯CSS实现漂亮的下拉导航效果代码。分享给大家供大家参考。具体如下： 这是一款纯CSS完成的下拉导航代码，蓝色经典色调，非常大气，适合政府和企业类网站作为顶部的导航菜单，浏览器兼容性完成OK，有...
纯css实现水平下拉导航菜单.zip
07-04
纯css实现水平下拉导航菜单是一款css导航菜单制作下拉三级菜单代码下载。
纯CSS实现鼠标经过多级下拉透明导航菜单代码
01-23
纯CSS实现鼠标经过多级下拉透明导航菜单代码
CSS中的导航栏和下拉菜单的实现
09-22
主要介绍了CSS中的导航栏和下拉菜单的实现的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
简单的CSS 下拉导航菜单实现代码
09-25
个教程会告诉你如何创建一个简单的CSS下拉菜单.如果你觉得好就请告诉你的一个朋友让他也知道这个网站。
纯css实现固定在网页底部菜单导航
06-05
一款取自国外某网站的纯CSS实现的始终固定在网页底部的
黑色css3导航栏下拉菜单动画特效
11-19
黑色css3导航栏下拉菜单动画特效 黑色css3导航栏下拉菜单动画特效 黑色css3导航栏下拉菜单动画特效 黑色css3导航栏下拉菜单动画特效
CSS3导航条下拉菜单弹出动画特效
06-05
这是一款带有5种不同下拉动画效果的CSS3导航条下拉菜单弹出动画特效，由纯CSS3实现的二级下拉菜单导航插件，十分的简单易用。
纯CSS实现超简单的二级下拉导航菜单代码
12-13
本文实例讲述了纯CSS实现超简单的二级下拉导航菜单代码。分享给大家供大家参考。具体如下： 这是一款纯CSS菜单，二级下拉导航效果，是最简洁的CSS导航菜单，兼容性也很棒，IE7/8、火狐等都支持，而且它还是学习CSS...
漂亮的CSS3弹性导航下拉菜单代码
06-05
这是一款简洁漂亮的CSS3弹性导航下拉菜单代码，波浪状弹性动画菜单特效，菜单项可以定义不同的颜色。
纯CSS黑色固定导航菜单代码
04-09
纯CSS黑色固定导航菜单代码是一款黑色简洁的下拉导航菜单，页面滚动后导航定位在顶部。
左侧下拉导航栏.html
02-17
左侧竖直下拉菜单，点击能够收缩和展开
纯css导航栏下拉列表
05-18
下面是一个简单的纯 CSS 导航栏下拉列表的示例： ``` /* 导航栏样式 */ .navbar { background-color: #333; overflow: hidden; } /* 链接样式 */ .navbar a { float: left; color: #f2f2f2; text-align: ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值