passer1991

纯css的带下拉菜单的导航条 

<html>
<head>
<title>简单的弹窗效果</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="g:\jquery.js"></script>
<style>
* { 
	margin:0; padding:0; 
	list-style-type: none;
	text-decoration: none;
}
ul.nav,ul.nav ul{
	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;
}

ul.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;
}
ul.nav li:last-child a{
	border-right: 0;
	border-bottom: 0;
}
ul a:hover,
ul a:focus{
	color:#e4ffd3;
	background-color: #6da203;
}


</style>
<script type="text/javascript">
$(document).ready(function(){
    $(".nav").click(function(){
	     $("input:checked").each(function(){
	     	alert($(this).val());    		
	     });;

    });


});
</script>
</head>
 
 
<body>
<p style="width:2em;border:1px solid red">你好</p>



<ul class="nav">
<li >Sunfishes
    <ul>
    <li><a href="">Blackbanded»
        sunfish</a></li>
    <li><a href="">Shadow bass</a></li>
    <li><a href="">Ozark bass</a></li>
    <li><a href="">White crappie</a></li>
  </ul>
 </li><li>Grunts
    <ul>
    <li><a href="">Smallmouth grunt
        </a></li>
    <li><a href="">Burrito</a></li>
    <li><a href="">Pigfish</a></li>
    </ul>
  </li><li>Remoras
    <ul>
    <li><a href="">Whalesucker</a></li>
    <li><a href="">Marlinsucker</a></li>
    <li><a href="">Ceylonese remora</a></li>
    <li><a href="">Spearfish remora</a></li>
    <li><a href="">Slender suckerfish</a></li>
    </ul>
  </li>
</ul>
</body>
</html>

　　

posted on 2013-09-24 10:46  passer1991  阅读(317)  评论(0)    收藏  举报

导航