简单二级菜单制作

    这次分享的是一个二级菜单的制作，分别用到ul(作为导航菜单的框架)a标签(作为连接使用)及一些基本的css样式。

    下面是制作完成的效果

   

   下面是h5的结构：

   

     
    
         
我的主页
         
碎言碎语
             

                 
1
                 
2
                 
3
                 
4
                 
5
             
          
          
模板分享
          
技术之外
          
学无止境
          
开源项目
          
我的简介
          
与我联系
      
   

利用class为menu的ul作为它的一级菜单，利用class为menu1的ul作为它的二级菜单

下面是css样式的写法：

		*{margin:0;padding:0;}
		html{
			background: -webkit-gradient(linear,left top,right bottom,from(#18222B), to(#D1E1BD));/*背景渐变*/
			} 
		a:link,a:visited{
			background-color:#252628;
			color: #FFF;
			text-decoration:none;
		}
		a:active,a:hover{
			background-color:#FFF;
			color:#252628;
		}
		.header{
			width:1000px;
			height:32px;
			margin:0 auto;
			background-color:#252628;
		}
		.menu,.menu1{
			list-style:none;
		}
		.menu li{
			float:left;
			width:125px;
		}
		.menu li:hover .menu1{
	        display:block;
                }
		.menu li a{
			display: block;
			line-height:32px;
			text-align:center;
		}
		.menu1{
			display:none;
		}

这是基本的css样式的设置，首先把二级菜单的css样式设置为隐藏，然后再利用一级菜单li的hover来实现二级的显示。