<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("ul.subnav").parent().append("<span></span>");
$("ul.topnav li span").click(function() {
$(this).parent().find("ul.subnav").slideDown('fast').show();
$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul.subnav").slideUp('slow');
});
}).hover(function() {
$(this).addClass("subhover");
}, function(){
$(this).removeClass("subhover");
});
$("ul.subnav li").each(function(i){
$(this).bind("click",function(){
$(this).parent().parent().find("a.sname").text($(this).find("a").text());
$(this).parent().hide();
});
});
});
</script>
<style type="text/css">
body{margin:0;padding:0;font:10px normal Arial, Helvetica, sans-serif;}
/* container */
.container{ width:1200px; margin:0 auto;}
ul.topnav{list-style:none;padding:0 20px; width:100%;height:35px;background:#222;font-size:1.2em;background:#08A3BC;}
ul.topnav li{float:left;height:35px; width:120px; text-align:center; position:relative;}
ul.topnav li a{padding:10px 5px;color:#fff;display:block;text-decoration:none;}
ul.topnav li a:hover{background:#0C74F0;}
ul.topnav li span{height:35px; width:120px; text-align:center; display:block; position:absolute; left:0; top:0;}
ul.topnav li span.subhover{background-position:center bottom;cursor:pointer;}
ul.topnav li ul.subnav{list-style:none;position:absolute;left:0;top:35px;background:#333;margin:0;padding:0;display:none;float:left;width:170px;-moz-border-radius-bottomleft:5px;-moz-border-radius-bottomright:5px;-webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;border:1px solid #111;}
ul.topnav li ul.subnav li{margin:0;padding:0;border-top:1px solid #252525;border-bottom:1px solid #444;clear:both;width:170px;}
ul.topnav li ul.subnav li a{float:left;width:145px;background:#333;padding-left:20px;}
ul.topnav li ul.subnav li a:hover{background:#222;}
</style>
</head>
<body>
<div class="container">
<ul class="topnav">
<li><a href="#">Home</a></li>
<li>
<a href="#" class="sname">Tutorials</a>
<ul style="display: none;" class="subnav">
<li><a href="#">Sub Nav Link1</a></li>
<li><a href="#">Sub Nav Link2</a></li>
<li><a href="#">Sub Nav Link3</a></li>
<li><a href="#">Sub Nav Link4</a></li>
<li><a href="#">Sub Nav Link5</a></li>
</ul>
</li>
<li>
<a href="#" class="sname">Resources</a>
<ul style="display: none;" class="subnav">
<li><a href="#">Sub Nav Link1</a></li>
<li><a href="#">Sub Nav Link2</a></li>
<li><a href="#">Sub Nav Link3</a></li>
<li><a href="#">Sub Nav Link4</a></li>
<li><a href="#">Sub Nav Link5</a></li>
</ul>
</li>
<li><a href="#">About Us</a></li>
<li><a href="#">Advertise</a></li>
<li><a href="#">Submit</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</body>
</html>
转载请注明原文地址: https://ju.6miu.com/read-4480.html
