css导航菜单
求css高手帮我看看这个导航如何做出来，或者给我一个跟这个导航条差不多的，多谢了，能给出详细的代码最好，呵呵，我想做的就是这个网站的导航www.caissa.com.cn...
求css高手帮我看看这个导航如何做出来，或者给我一个跟这个导航条差不多的，多谢了，能给出详细的代码最好，呵呵，我想做的就是这个网站的导航 www.caissa.com.cn
展开
4个回答
展开全部
<!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">
body{font-size:14px;}
ul{margin:0; padding:0; list-style:none;}
a{text-decoration:none; color:#000;}
#menu{position:absolute; top:0; left:100px;width:780px;}
#menu li{float:left; height:34px; line-height:34px;}
#menu li a{ display:block;font-weight:bold;background:url(link.gif) left top; padding-left:20px;}
#menu span{display:block; background:url(link.gif) no-repeat right top; padding-right:20px;}
#menu li a:hover{background:url(hover.gif) no-repeat left top; color:#C30;}
#menu li a:hover span{background:url(hover.gif) no-repeat right top;}
#sub_menu {position:absolute; top:35px; font-size:12px; line-height:2em;}
#sub_menu #sub_2{margin-left:150px;}
#sub_menu #sub_3{margin-left:250px;}
#sub_menu #sub_4{margin-left:350px;}
.dis { display:block; }
.undis { display:none;}
</style>
<script type="text/javascript" language="javascript">
<!--
function show(n){
//如果有N个标签,就将i<=N;
for(var i=1;i<=6;i++){
document.getElementById('sub_'+i).className='undis';
}
document.getElementById('sub_'+n).className='dis';
}
-->
</script>
</head>
<!--急冲冲赶出来的，还没有什么时间去添加一些注析，你要是有什么不明白的，可以问我。其他的一些小细节，你再自己修改啦！-->
<body>
<div id="Nav">
<div id="menu">
<ul>
<li><a href="#" onmouseover="show(1)"><span>凯撒首页</span></a></li>
<li><a href="#" onmouseover="show(2)"><span>最新动态页</span></a></li>
<li><a href="#" onmouseover="show(3)"><span>产品及预定中心页</span></a></li>
<li><a href="#" onmouseover="show(4)"><span>帮助及查询中心页</span></a></li>
<li><a href="#" onmouseover="show(5)"><span>会员俱乐部页</span></a></li>
<li><a href="#" onmouseover="show(6)"><span>凯撒论坛页</span></a></li>
</ul>
</div>
<div id="sub_menu">
<div id="sub_1" class="undis" ></div>
<div id="sub_2" class="undis" ><a href="#">聚焦凯撒</a> | <a href="#">国内新闻</a> | <a href="#">国际新闻</a></div>
<div id="sub_3" class="undis" ><a href="#">聚焦凯撒</a> | <a href="#">国内新闻</a> | <a href="#">国际新闻</a>聚焦凯撒</a> | <a href="#">国内新闻</a></div>
<div id="sub_4" class="undis" ><a href="#">预定流程</a> | <a href="#">订单查询</a> | <a href="#">在线答疑</a><a href="#">签证服务</a> | <a href="#">出游宝典</a> | <a href="#">网站地图</a></div>
<div id="sub_5" class="undis" ></div>
<div id="sub_6" class="undis" ></div>
</div>
</div>
</body>
</html>
<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">
body{font-size:14px;}
ul{margin:0; padding:0; list-style:none;}
a{text-decoration:none; color:#000;}
#menu{position:absolute; top:0; left:100px;width:780px;}
#menu li{float:left; height:34px; line-height:34px;}
#menu li a{ display:block;font-weight:bold;background:url(link.gif) left top; padding-left:20px;}
#menu span{display:block; background:url(link.gif) no-repeat right top; padding-right:20px;}
#menu li a:hover{background:url(hover.gif) no-repeat left top; color:#C30;}
#menu li a:hover span{background:url(hover.gif) no-repeat right top;}
#sub_menu {position:absolute; top:35px; font-size:12px; line-height:2em;}
#sub_menu #sub_2{margin-left:150px;}
#sub_menu #sub_3{margin-left:250px;}
#sub_menu #sub_4{margin-left:350px;}
.dis { display:block; }
.undis { display:none;}
</style>
<script type="text/javascript" language="javascript">
<!--
function show(n){
//如果有N个标签,就将i<=N;
for(var i=1;i<=6;i++){
document.getElementById('sub_'+i).className='undis';
}
document.getElementById('sub_'+n).className='dis';
}
-->
</script>
</head>
<!--急冲冲赶出来的，还没有什么时间去添加一些注析，你要是有什么不明白的，可以问我。其他的一些小细节，你再自己修改啦！-->
<body>
<div id="Nav">
<div id="menu">
<ul>
<li><a href="#" onmouseover="show(1)"><span>凯撒首页</span></a></li>
<li><a href="#" onmouseover="show(2)"><span>最新动态页</span></a></li>
<li><a href="#" onmouseover="show(3)"><span>产品及预定中心页</span></a></li>
<li><a href="#" onmouseover="show(4)"><span>帮助及查询中心页</span></a></li>
<li><a href="#" onmouseover="show(5)"><span>会员俱乐部页</span></a></li>
<li><a href="#" onmouseover="show(6)"><span>凯撒论坛页</span></a></li>
</ul>
</div>
<div id="sub_menu">
<div id="sub_1" class="undis" ></div>
<div id="sub_2" class="undis" ><a href="#">聚焦凯撒</a> | <a href="#">国内新闻</a> | <a href="#">国际新闻</a></div>
<div id="sub_3" class="undis" ><a href="#">聚焦凯撒</a> | <a href="#">国内新闻</a> | <a href="#">国际新闻</a>聚焦凯撒</a> | <a href="#">国内新闻</a></div>
<div id="sub_4" class="undis" ><a href="#">预定流程</a> | <a href="#">订单查询</a> | <a href="#">在线答疑</a><a href="#">签证服务</a> | <a href="#">出游宝典</a> | <a href="#">网站地图</a></div>
<div id="sub_5" class="undis" ></div>
<div id="sub_6" class="undis" ></div>
</div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
可以利用CSS的hover伪类实现，不需要JS。
首先定义好默认样式，然后在hover中加入下拉菜单的显示隐藏。
例如：
li:hover{border-bottom:2px solid red;background-color:#fff;color:red}
li:hover div{display:block}
首先定义好默认样式，然后在hover中加入下拉菜单的显示隐藏。
例如：
li:hover{border-bottom:2px solid red;background-color:#fff;color:red}
li:hover div{display:block}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
有基本导航，滑动门导航等等，包括结合背景定位等实现的导航，自己可以下载学习一下，有不懂的可以给我留言。希望能够帮助到你。加油
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
类似这种的好多，你去css模板站看看，好多类似的呢，不过就是颜色不一样，你下下来，可以改么，颜色很好改的
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
