创建基本的下拉菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>
<div>
     <ul>
          <li class="menuHeader about">
          <a href="#">About us</a>
          <ul class="menuItem">
          <li><a href="http://google.com">Company</a></li>
          <li><a href="#">Culture</a></li>
          <li><a href="#">Motto</a></li>
          </ul>
          </li>
         
          <li class="menuHeader products">
          <a href="#">Products</a>
          <ul class="menuItem">
          <li><a href="#">Shopping cart</a>
          <li><a href="#">CMS</a>
          <li><a href="#">Blog Software</a>
         
          </ul></li>
          <li class="menuHeader tech">
          <a href="#">Technology</a>
          <ul class="menuItem">
          <li><a href="#">PHP</a></li>
          <li><a href="#">PHP</a></li>
          <li><a href="#">PHP</a></li>
          </ul>
          </li>
    
         
     </ul>
</div>

<script type="text/javascript" src="../jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
     $('ul.menuItem').hide();
     $("li.menuHeader").hover(function(){
         
          $('ul',this).slideDown();
     },function(){
          $('ul',this).slideUp();
     });
    
});

</script>
</body>
</html>
 
<script type="text/javascript">

$(document).ready(function(){
     $(".menuItem").hide();
     $(".menuHeader > a").click(function(){
          $('.menuItem:visible').slideToggle();
          $('ul',$(this).parent()).slideToggle();
         
     });
    
});

</script>
 
style.css
 
@CHARSET "UTF-8";
body
     {
          font-family:"Trebuchet mS",verdana;
}
ul{
     list-style:none;
     margin:0;
     padding:0;
}
li.menuHeader
     {
     border:1px solid #fff;
     float:left;
     padding:5px 10px;
     text-align:center;
     width:120px;    
         
     }
ul.menuItem
     {
     margin-top:5px;
         
     }
.menuItem > li
     {
     padding:5px 10px;
         
     }
    
a
     {
          color:#fff;    
}
.about{
     background-color:#6D9931;
}
.products{
     background-color:#D63333;
}
.tech{
     background-color:#D49248;
}
posted @ 2014-03-31 17:43  wint  Views(118)  Comments(0)    收藏  举报