jQuery导航菜单实现-优快云博客

本文链接：https://blog.youkuaiyun.com/u012307002/article/details/19199821

<!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">
	<meta name="keywords" content="jquery,ui,easy,easyui,web">
	<style type="text/css">
	 ul,li{
	 	list-style-type: none;
	 }
     ul.nav ul.nav ul{
     	margin:0;
     	padding: 0;
     	
     	float: left;
     	border:1px solid #486B02;
     	background-color: #8BD400;
     }

     ul.nav li{
     	float:left;
     	width: 8em;
     	background-color: #8BD400;
     }

     ul.nav li ul{
     	width: 8em;
     	position: absolute;
     	/*left: -999em;*/
     	display: none;
     }

     /*.nav li:hover ul{
     	left: auto;
     }*/

     ul.nav a{
     	display: block;
     	color: #2B3F00;
     	text-decoration: none;
     	padding: 0.3em 1em;
     	border-right: 1px solid #486B02;
     	border-left: 1px solid #E4FFD3;
     }

     ul.nav li li a{
     	border-top:1px solid #E4FFD3;
     	border-bottom: 1px solid #486B02;
     	border-left: 0;
     	border-right: 0;
     }




	</style>
	<script type="text/javascript" src="G://jquery.js"></script>
	<script type="text/javascript">
       $(document).ready(function(){
          $(".nav-title").mouseover(function(){
          	 $(".sub-nav").hide();
          	 $(this).next(".sub-nav").show();
          });/**/

          $(".sub-nav a").click(function(){
          	  $("#prompt").html($(this).text());
          	  $(this).parents(".sub-nav").hide();
          });

          $(".sub-nav").mouseleave(function(){
                 $("#prompt").html($(this).text());
                 $(this).hide();
          });
          $(".nav-title").click(function(){
          	 $(".sub-nav").hide();
          	 $(this).next(".sub-nav").show();
          });

       });
	</script>
</head>
<body>
	<ul class="nav">
	    <li ><a  href="javascript:void(0)" class="nav-title">Home</a></li>
	    <li><a  href="javascript:void(0)" class="nav-title">Products</a>
	    	<ul class="sub-nav">
	    		<li><a  href="javascript:void(0)">Silverback</a></li>
	    		<li><a  href="javascript:void(0)">Font Deck</a></li>
	    	</ul>
	    </li>
	    <li><a  href="javascript:void(0)" class="nav-title">Services</a>
	        <ul  class="sub-nav">
	           <li><a  href="javascript:void(0)">Design</a></li>
	           <li><a  href="javascript:void(0)">Development</a></li>
	           <li><a  href="javascript:void(0)">Consultancy</a></li>
	        </ul>
	    </li>
	    <li><a  href="javascript:void(0)" class="nav-title">Contact Us</a></li>
	</ul>

	<div id="prompt"></div>
</body>
</html>

jquery api 中文