CSS导航栏及下拉菜单

       导航栏对于一个网站来说非常重要，熟练地使用CSS可以转换成好看的导航栏而不是枯燥的HTML菜单。导航栏基本上是一个链接列表，所以使用

和

 元素非常有意义，导航栏就是建立在列表标签的精确熟练使用上。

小复习：伪类的使用方法（图片来源于W3Cschool）

（一）垂直导航栏示例

     

		

			

				Formerly
			
			

				Now
			
			

				Future
			
			

				Someone
			
		
	

* {
	padding: 0px;
	margin: 0px;
}
div{
	margin-left: 200px;
	margin-top: 200px;
}
ul {
	list-style-type: none;
}

a:link,
a:visited {
	/*显示块元素的链接，它允许给宽度*/
	display: block;
	font-weight: bold;
	color: #FFFFFF;
	background-color: pink;
	width: 120px;
	text-align: center;
	padding: 4px;
	text-decoration: none;
	text-transform: uppercase;
}

a:hover,
a:active {
	background-color: palevioletred;
}

演示图（图左是正常显示的效果，图右是没有添加display属性的效果）：

（二）横向导航栏示例

有两种实现横向导航的方法：内联列表项和浮动列表项。

• 使用内联列表项实现，删除上述CSS代码中的display: block;属性，添加如下属性：

  ul li{
  	display: inline;
  }

  演示图：

• 使用浮动列表项实现，浮动列表项可以使每一部分
具有相同的宽度。在原有CSS代码的基础上，添加如下属性：

ul li{
  float:left;
}

演示图：

（三）下拉菜单导航

html代码：

        

			

				One
			
			

				Two
			
			

				Three
				

					111
					222
					333
				
			
		

样式代码：

* {
	padding: 0px;
	margin: 0px;
}
ul{
	list-style-type: none;
	overflow: hidden;
	background-color: papayawhip;
}	
ul li{
	float: left;
}
li a, .nav{
	display: inline-block;
	color: brown;
	text-align: center;
	padding: 14px  16px;
	text-decoration: none;
}
li a:hover, .press:hover  .nav{
	background-color: peachpuff;
}
.press{
	display: inline-block;
}
.nav-con{
	display: none;
    position: absolute;
    background-color: papayawhip;
    min-width: 160px;
}
.nav-con a{
	color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.nav-con  a:hover{
	background-color: peachpuff;
}
.press:hover .nav-con{
	display: block;
}

演示效果图：

小了解：

• 子菜单隐藏
• 当鼠标移入菜单时，显示子菜单
• 父级菜单要使用position定位，子级菜单使用absolute绝对定位时就相对父菜单设置位置，会呈现下拉菜单与父菜单对齐效果。

The  past  will  always  come  and  we  will  accept  it.                                         元气少女，加油！