二级下弹出菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>jQuery suckerFish</title>
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
<link rel="stylesheet" type="text/css" href="star-light/star-light.css" media="all" />
<script src="jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#nav-one li").hover(
function () { $("ul", this).fadeIn("slow"); },
function () { }
);
});
});
};
</script>
<style type="text/css">
/* Navigation */
.nav, .nav ul {list-style:none;margin:0;padding:5px;}
.nav {font-family:Arial,Helvetica,sans-serif;z-index:100;position:relative;}
.nav li { float:left;margin:0;padding:0;position:relative;}
.nav ul {background:#565656;border-bottom:1pxsolid#000;list-style:none;margin:0;width:60px;position:absolute;top:-999em;left:-1px;}
.nav li:hover ul,.nav li.sfHover ul {top:18px;}
.nav ul li {border:0;float:none;}
</style>
</head>
<body>
<h1><a href="#">jQuery</a> » SuckerFish Style</h1>
<h2>Purpose</h2>
<p>Replicate Suckerfish Menus.</p>
<h3>Original Code</h3>
<h2>Sample Markup</h2>
<h4>Sample 1 - One Level</h4>
<div style="border:1px solid red"> 0
<div >1</div>
<ul id="nav-one" class="nav">
<li>
<img src="pdf.png" />
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</li>
<li> 1
</li>
<li>2
</li>
<li>3
</li>
</ul>
<br/> <br/>
<div></div>
</div>
</body>
</html>
