css导航菜单

•2010-05-19 12:43:26•网站设计

网页代码如下：

<!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>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
}
ul {
list-style:none;
}
ul li {
float:left;
}
.spacer {
clear:both;
}
#main_nav {
margin:20px;
}
#menubox {
background:#06C;
width:960px;
line-height:25px;
height:35px;
}
#menubox ul {
padding-left:5px;
position:relative;
top:10px;
}
#menubox li {
padding:0 15px;
}
#menubox li.current {
background:#eee;
}
#menubox li.current a {
color:#06C;
font-weight:bold;
position:relative;
top:3px;
}
#contentbox {
background:#eee;
width:960px;
line-height:30px;
height:30px;
}
#menubox li a {
display:block;
text-decoration:none;
color:#eee;
}
#contentbox div {
padding-left:5px;
}
#contentbox ul li {
padding:0 7px;
}
#contentbox ul li a {
font-size:12px;
text-decoration:none;
color:#000;
}
#contentbox ul li a:hover {
color:#06c;
border-bottom:2px solid #039;
}
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>
<script>
$(function(){
$("#contentbox div:not(:first)").hide();
$("#menubox li").each(function(index){
$(this).mouseover(function(){
$("#menubox li.current").removeClass("current");
$(this).addClass("current");
$("#contentbox > div:visible").hide();
$("#contentbox div:eq(" + index + ")").show();
});
});
$('#menubox').corner("10px top ");
$('#menubox li').corner("5px top ");
$('#contentbox').corner("5px bottom ");
});
</script>
</head>
<body>
<div id="main_nav">
<div id="menubox">
    <ul>
      <li class="current"><a href="#">无忧首页</a></li>
      <li><a href="#">网页模板</a></li>
      <li><a href="#">CMS模板</a></li>
      <li><a href="#">CMS教程</a></li>
      <li><a href="#">Div+Css</a></li>
      <li><a href="#">网站制作</a></li>
      <li><a href="#">网页特效</a></li>
      <li><a href="#">网络编程</a></li>
      <li><a href="#">网站运营</a></li>
      <li><a href="#">素材工具</a></li>
      <li><a href="#">特别企划</a></li>
    </ul>
    <br class="spacer" />
</div>
<div id="contentbox">
    <div>最新公告:模板无忧全心打造建站资源聚合门户!提供网页模板,CMS模板,网页常用图片素材等建站相关资源!无忧QQ群:169309.</div>
    <div>
      <ul>
        <li><a href="#">游戏网页模板</a></li>
        <li><a href="#">个人网页模板</a></li>

本文关键词: css导航菜单