二级菜单的制作

html+css下拉菜单

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

<title>CSS/HTML二级菜单</title>

<style type="text/css">

*{

 margin:0px; padding:0px;

}

 #menu{ 

     background-color:#eee; 

     width:400px;

    height:40px; 

    margin:0 auto;   /*居中*/

}

 ul{ 

     list-style:none;/*去点号*/

 }

 ul li{

   float:left; 

   line-height:40px; 

   text-align:center;

   position:relative;     /*相对定位*/

}

 a{ text-decoration:none; 

     color:#000; 

     display:block;

    width:90px;

 }

 a:hover{ 

     color:#FFF;

    background-color:#666;

 }

 ul li ul li{ 

     float:none; 

     border-left:none;

     margin-top:2px; 

     background-color:#eee; 

 } 

 ul li ul{ 

   display:none; 

   width:90px;

   position:absolute;    /*绝对定位*/

}

 ul li:hover ul{ 

     display:block;

 } 

</style>

</head>

<body>

<div id="menu">

   <ul>  

  <li><a href="#">首页</a></li>

  <li><a href="#">开发语言</a>

      <ul>

   <li><a href="#">JavaScript</a></li>

  <li><a href="#">jQuery</a></li> 

   </ul>  

  </li>

  <li><a href="#">关于我们</a>

    <ul>

   <li><a href="#">人才招聘</a></li>

  <li><a href="#">员工风采</a></li> 

   </ul> 

   </li> 

</ul>

</div> 

</body>

</html>

 

 

html+css横向菜单

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

<title>CSS/HTML二级菜单</title>

<style type="text/css">

*{

 margin:0px; padding:0px;

}

 #menu{ 

     background-color:#eee; 

     width:400px;

    height:40px; 

    margin:0 auto;   /*居中*/

}

 ul{ 

     list-style:none;/*去点号*/

 }

 ul li{

   float:left; 

   line-height:40px; 

   text-align:center;

   position:relative;     /*相对定位*/

}

 a{ text-decoration:none; 

     color:#000; 

     display:block;

    width:90px;

 }

 a:hover{ 

     color:#FFF;

    background-color:#666;

 }

 ul li ul li{ 

     float:left;      /*横向*/

     border-left:none;

     margin-top:2px; 

     background-color:#eee; 

 } 

 ul li ul{ 

   display:none; 

   width:270px;      /*横向*/

   position:absolute;    /*绝对定位*/

}

 ul li:hover ul{ 

     display:block;

 } 

</style>

</head>

<body>

<div id="menu">

   <ul>  

  <li><a href="#">首页</a></li>

  <li><a href="#">开发语言</a>

      <ul>

   <li><a href="#">JavaScript</a></li>

  <li><a href="#">jQuery</a></li> 

   </ul>  

  </li>

  <li><a href="#">关于我们</a>

    <ul>

   <li><a href="#">人才招聘</a></li>

  <li><a href="#">员工风采</a></li> 

   </ul> 

   </li> 

</ul>

</div> 

</body>

</html>

 

 

jQuery

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

<title>CSS/HTML二级菜单</title>

<style type="text/css">

*{

 margin:0px; padding:0px;

}

 #menu{ 

     background-color:#eee; 

     width:400px;

    height:40px; 

    margin:0 auto;   /*居中*/

}

 ul{ 

     list-style:none;/*去点号*/

 }

 ul li{

   float:left; 

   line-height:40px; 

   text-align:center;

   position:relative;     /*相对定位*/

}

 a{ text-decoration:none; 

     color:#000; 

     display:block;

    width:90px;

 }

 a:hover{ 

     color:#FFF;

    background-color:#666;

 }

 ul li ul li{ 

     float:none; 

     border-left:none;

     margin-top:2px; 

     background-color:#eee; 

 } 

 ul li ul{ 

   display:none; 

   width:90px;

   position:absolute; left:0px; top:40px;

}

</style>

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">

  $(function(){

     $(".limenu").mouseover(function(){

         $(this).children("ul").show();

         

         

         })

     $(".limenu").mouseout(function(){

         

         $(this).children("ul").hide();

         

         })

      

      })

  

</script>

</head>

<body>

<div id="menu">

   <ul>  

  <li><a href="#">首页</a></li>

  <li class="limenu"><a href="#">开发语言</a>

      <ul>

   <li ><a href="#">JavaScript</a></li>

  <li ><a href="#">jQuery</a></li> 

   </ul>  

  </li>

  <li class="limenu"><a href="#">关于我们</a>

    <ul>

   <li><a href="http://www.baidu.com">人才招聘</a></li>

  <li><a href="#">员工风采</a></li> 

   </ul> 

   </li> 

</ul>

</div> 

</body>

</html>

 

 

js

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

<title>CSS/HTML二级菜单</title>

<style type="text/css">

*{

 margin:0px; padding:0px;

}

 #menu{ 

     background-color:#eee; 

     width:400px;

    height:40px; 

    margin:0 auto;   /*居中*/

}

 ul{ 

     list-style:none;/*去点号*/

 }

 ul li{

   float:left; 

   line-height:40px; 

   text-align:center;

   position:relative;     /*相对定位*/

}

 a{ text-decoration:none; 

     color:#000; 

     display:block;

    width:90px;

 }

 a:hover{ 

     color:#FFF;

    background-color:#666;

 }

 ul li ul li{ 

     float:none; 

     border-left:none;

     margin-top:2px; 

     background-color:#eee; 

 } 

 ul li ul{ 

   display:none; 

   width:90px;

   position:absolute; left:0px; top:40px;

}

</style>

 <script type="text/javascript">



        function displaySubMenu(li) {



            var subMenu = li.getElementsByTagName("ul")[0];



            subMenu.style.display = "block";



        }



        function hideSubMenu(li) {



            var subMenu = li.getElementsByTagName("ul")[0];



            subMenu.style.display = "none";



        }



    </script>



</head>

<body>

<div id="menu">

   <ul>  

  <li><a href="#">首页</a></li>

  <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">开发语言</a>

      <ul>

   <li ><a href="#">JavaScript</a></li>

  <li ><a href="#">jQuery</a></li> 

   </ul>  

  </li>

  <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">关于我们</a>

    <ul>

   <li><a href="http://www.baidu.com">人才招聘</a></li>

  <li><a href="#">员工风采</a></li> 

   </ul> 

   </li> 

</ul>

</div> 

</body>

</html>

 

你可能感兴趣的:(二级菜单)