实现简单的导航栏效果

:hover 选择器

:hover 选择器用于选择鼠标指针浮动在上面的元素。
ps： :hover 选择器可用于所有元素，不只是链接。

一级导航栏效果

一般网页做导航栏都是有跳转效果的功能，所以一般li中都包含了a标签。
i标签里可以放小图标。

html代码

<div class="nav">
			<ul class="nav_ul">
				<li>
					<a href="">首页 <i>i> a>
				li>
				<li>
					<a href="">视频 <i>i> a>
				li>
				<li>
					<a href="">小说 <i>i> a>
				li>
				<li>
					<a href="">音乐 <i>i> a>
				li>
				<li>
					<a href="">游戏 <i>i> a>
				li>
				<li>
					<a href="">其他 <i>i> a>
				li>
			ul>
		div>

css代码

*{
			padding: 0;
			margin:0;
		}
		li{
			list-style: none;
		}
		a{
			/*取消a标签下边的线*/
			text-decoration: none;
		}
		.nav{
			width: 300px;
			margin: 30px auto;
		}
		.nav_ul li{
			width: 150px;
			line-height: 35px;
			background-color: powderblue;
		}
		ul.nav_ul li a{
			width: 100px;
			line-height: 35px;
			display: inline-block;
			background-color: lavenderblush;
			padding-left: 25px;
			/*相对自己定位*/
			position: relative;
		}
		/*根据ul找类名为nav_ul的ul下的i*/
		ul.nav_ul i{
			/*改为行内块元素*/
			display: inline-block;
			width: 20px;
			height: 20px;
			/*背景图片*/
			background-image: url(img/shape.png);
			/*背景图片不平铺*/
			background-repeat: no-repeat;
			/*绝对定位 相对于它最近的已有定位的父级元素定位*/
			position: absolute;
			right: 5px;
    		top: 11px;
		}
		
		/*li的hover效果*/
		ul.nav_ul li:hover{
			/*更换li的背景颜色*/
			background-color: plum;
			/*鼠标放上去变成小手*/
			cursor: pointer;
		}
		/*li下的a标签的hover效果*/
		ul.nav_ul li:hover a{
			/*更换a标签的字体颜色*/
			color: lightgreen;
		}
		/*li下的a标签的i的hover效果*/
		ul.nav_ul li:hover a i{
			/*更换背景图片*/
			background-image: url(img/shape1.png);
		}

hover之前的效果：

hover之后的效果：

注意： 这个放上去改变了li的背景 ，只是被a标签挡住了一部分。想改变一行的背景颜色的话，可以给a标签的宽高跟li的一样大。然后给a标签的hover改背景颜色。
效果如下

ps： 一般都在所有要改变元素的大盒子的hover中改变效果，如果不是，容易出现鼠标只有放在给hover的元素上才会出现对应的效果，没有整体性。

二级导航栏效果

简单的二级菜单
html代码

<div class="nav">
			<ul class="nav_ul">
				<li>
					<a href="">首页 <i>i> a>
				li>
				<li>
					<a href="">视频 <i>i> a>
					
					<div class="second_menu">
						<ol>
							<li><a href="">长安十二时辰a>li>
						ol>
					div>
					
				li>
				<li>
					<a href="">小说 <i>i> a>
					
					<div class="second_menu">
						<ol>
							<li><a href="">天官赐福a>li>
							<li><a href="">杀破狼a>li>
							<li><a href="">镇魂a>li>
						ol>
					div>
					
				li>
				<li>
					<a href="">音乐 <i>i>a>
					
					<div class="second_menu">
						<ol>
							<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>
						ol>
					div>
					
				li>
				<li>
					<a href="">游戏 <i>i> a>
					
					<div class="second_menu">
						<ol>
							<li><a href="">英雄联盟a>li>
							<li><a href="">4399a>li>
							<li><a href="">绝地求生a>li>
						ol>
					div>
					
				li>
				<li>
					<a href="">其他 <i>i> a>
				li>
			ul>
		div>

css代码

*{
			padding: 0;
			margin:0;
		}
		li{
			list-style: none;
		}
		a{
			/*取消a标签下边的线*/
			text-decoration: none;
		}
		.nav{
			width: 300px;
			margin: 30px auto;
		}
		.nav_ul li{
			width: 150px;
			line-height: 35px;
			background-color: powderblue;
			position: relative;
		}
		ul.nav_ul li a{
			width: 150px;
			line-height: 35px;
			display: inline-block;
			background-color: lavenderblush;
			padding-left: 25px;
			/*相对自己定位*/
			position: relative;
		}
		/*根据ul找类名为nav_ul的ul下的i*/
		ul.nav_ul i{
			/*改为行内块元素*/
			display: inline-block;
			width: 20px;
			height: 20px;
			/*背景图片*/
			background-image: url(img/shape.png);
			/*背景图片不平铺*/
			background-repeat: no-repeat;
			/*绝对定位 相对于它最近的已有定位的父级元素定位*/
			position: absolute;
			right: 5px;
    		top: 11px;
		}
	
		/*li下的a标签的hover效果*/
		ul.nav_ul li:hover a{
			color: lightgreen;
			background-color: plum;
		}
		/*li下的a标签的i的hover效果*/
		ul.nav_ul li:hover a i{
			background-image: url(img/shape1.png);
		}
		/*二级菜单显示*/
		ul.nav_ul li:hover .second_menu{
			display: block;
		}
		/*二级菜单*/
		.second_menu{
			width: 150px;
			background-color: lightgoldenrodyellow;
			/*根据一级菜单中它的父元素绝对定位*/
			position: absolute;
			left: 174px;
			top: 0px;
			/*隐藏*/
			display: none;
		}
		.second_menu ul li{
			width: 150px;
			line-height: 35px;
		}
		.second_menu ol li a{
			display: block;
			background-color: lightgoldenrodyellow;
		}
		.second_menu ol li:hover a{
			background-color: blanchedalmond;
		}

hover之前效果

hover之后效果

ps
想把二级菜单放哪里就把它定位在哪里，直接改变他的定位代码就行了。
例子（定位到左边）

/*二级菜单*/
		.second_menu{
			width: 150px;
			background-color: lightgoldenrodyellow;
			/*根据一级菜单中它的父元素绝对定位*/
			position: absolute;
			/*改变这一句代码就ok了*/
			right: 174px;
			top: 0px;
			/*隐藏*/
			display: none;
		}

效果

注意 二级菜单中的li可能会受到上面的样式影响，这是就会有优先级的问题。