HTML5+CSS设计导航栏及其子菜单

HTML界面设计

新建一个web项目，在标签中创建一个

，指定class属性=“header”。在

中创建一个无序列表

，指定class属性=“header_ul”。在其中添加几个

作为导航栏的菜单并分别指定class属性

	
		
		
	
	
		

			

				
HOME
				
PAGES
				
PORTFOLIO
				
BLOG
			
		
	

然后为各个菜单添加子菜单

	
		
		
		
	

	
		

			

				
HOME
					

						
HOME1
						
HOME2
						
HOME3
					
				

				
PAGES
					

						
PAGES1
						
PAGES2
						
PAGES3
					
				
				
PORTFOLIO
					

						
PORTFOLIO1
						
PORTFOLIO2
						
PORTFOLIO3
					
				
				
BLOG
					

						
BLOG1
						
BLOG2
						
BLOG3
					
				
			
		
	

将其在浏览器运行

可以看到，这和我们需要的导航栏的效果可不同，这就需要我们在css文件中改变它的样式

CSS样式设计

创建一个style.css文件
首先将body的边缘留白设置为0

body {
	margin: 0px;
}

然后为div设计宽高

.header {
	width: 100%;
	height: 100px;
}

接着为一级菜单设置浮动位置，并将列表标点取消

.header_ul {
	float: left;
	list-style: none;
}

为

列表设置浮动及顶部左部留白
设置鼠标滑入变色

.header_ul li {
	margin-top: 26px;
	margin-left: 15px;
	float: left;
}

.header_ul li:hover {
	color: red;
}

为子菜单设置各个属性，主要有宽度，内部位置，固定位置

.header_ul_ul {
	width: 100px;
	text-align: center;
	position: absolute;
	list-style: none;
	background: white;
	color: black;
}

.header_ul_ul li {
	margin: 10px 15px 10px -25px;
	float: none;
}

将各个子菜单设置为隐藏

.header_ul_home .header_ul_ul {
	display: none;
}

.header_ul_pages .header_ul_ul {
	display: none;
}

.header_ul_portfollo .header_ul_ul {
	display: none;
}

.header_ul_blog .header_ul_ul {
	display: none;
}

再将其设置为鼠标滑入显示

.header_ul_home:hover .header_ul_ul {
	display: block;
}

.header_ul_pages:hover .header_ul_ul {
	display: block;
}

.header_ul_portfollo:hover .header_ul_ul {
	display: block;
}

.header_ul_blog:hover .header_ul_ul {
	display: block;
}

然后将css文件引入html文件中

可以看到效果


这样就基本实现了导航栏的效果
完整的css代码如下

body {
	margin: 0px;
}


/*导航栏*/

.header {
	width: 100%;
	height: 100px;
	background: #11333333;
}


/*一级菜单*/

.header_ul {
	float: left;
	list-style: none;
}

.header_ul li {
	margin-top: 26px;
	margin-left: 15px;
	float: left;
}

.header_ul li:hover {
	color: red;
}


/*二级菜单*/

.header_ul_ul {
	width: 100px;
	text-align: center;
	position: absolute;
	list-style: none;
	background: white;
	color: black;
}

.header_ul_ul li {
	margin: 10px 15px 10px -25px;
	float: none;
}

.header_ul_home .header_ul_ul {
	display: none;
}

.header_ul_pages .header_ul_ul {
	display: none;
}

.header_ul_portfollo .header_ul_ul {
	display: none;
}

.header_ul_blog .header_ul_ul {
	display: none;
}

.header_ul_home:hover .header_ul_ul {
	display: block;
}

.header_ul_pages:hover .header_ul_ul {
	display: block;
}

.header_ul_portfollo:hover .header_ul_ul {
	display: block;
}

.header_ul_blog:hover .header_ul_ul {
	display: block;
}