简单二级菜单制作

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

    下面是制作完成的效果

   

   下面是h5的结构：

   <div class="header">
     <ul class="menu" id="menu">    
         <li><a href="#">我的主页</a></li>
         <li><a href="#">碎言碎语</a>
             <ul class="menu1">
                 <li><a href="#">1</a></li>
                 <li><a href="#">2</a></li>
                 <li><a href="#">3</a></li>
                 <li><a href="#">4</a></li>
                 <li><a href="#">5</a></li>
             </ul>
          </li>
          <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>
          <li><a href="#">与我联系</a></li>
      </ul>
   </div>

利用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来实现二级的显示。