<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;
8em;
background-color: #8BD400;
}
ul.nav li ul{
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="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>