css菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<html>
<head>
<title>CSS Dropdown</title>
<style type="text/css">
/* General */
#cssdropdown, #cssdropdown ul { list-style: none; }
#cssdropdown, #cssdropdown * { padding: 0; margin: 0; }
/* Head links */
#cssdropdown li.headlink { width: 220px; float: left; margin-left: -1px; border: 1px black solid; background-color: #e9e9e9; text-align: center; }
#cssdropdown li.headlink a { display: block; padding: 15px; }
/* Child lists and links */
#cssdropdown li.headlink ul { display: none; border-top: 1px black solid; text-align: left; }
#cssdropdown li.headlink:hover ul { display: block; }
#cssdropdown li.headlink ul li a { padding: 5px; height: 17px; }
#cssdropdown li.headlink ul li a:hover { background-color: #333; }
/* Pretty styling */
#cssdropdown a { color: white; } #cssdropdown ul li a:hover { text-decoration: none; }
#cssdropdown li.headlink { background-color: blue; background-image: url(bg.gif); }
#cssdropdown li.headlink ul { background-color: red; background-position: bottom; padding-bottom: 10px; }
</style>
<script language="JavaScript">
<script type="text/javascript" src="jquery.js">
$(document).ready(function(){
$('#cssdropdown li.headlink').hover(
function() { $('ul', this).css('display', 'block'); },
function() { $('ul', this).css('display', 'none'); });
});
</script>
</head>
<body>
<ul id="cssdropdown">
<li class="headlink">
<a href="http://google.com/%22%3ESearch Engines</a>
<ul>
<li><a href="http://google.com/%22%3EGoogle%3C/a%3E%3C/li>
<li><a href="http://yahoo.com/%22%3EYahoo%3C/a%3E%3C/li>
<li><a href="http://live.com/%22%3ELive Search</a></li>
</ul>
</li>
<li class="headlink">
<a href="http://shopping.com%22%3eshopping%3c/a>
<ul>
<li><a href="http://amazon.com/%22%3EAmazon%3C/a%3E%3C/li>
<li><a href="http://ebay.com/%22%3EeBay%3C/a%3E%3C/li>
<li><a href="http://craigslist.com/%22%3ECraigsList%3C/a%3E%3C/li>
</ul>
</li>
</ul>
</body>
</html>
