<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=gb2312" />
<title>css+js导航菜单</title>
<style type="text/css">
<!--
*{ margin:0; padding:0;}
img{ border:0; }
body{font:12px/130% verdana,geneva,arial,helvetica,sans-serif,宋体;}li{list-style:none;}
.clearfix:after{content:" ";display:block;height:0;clear:both;visibility:hidden;}.clearfix{display:inline-block;}
a:link{ color:#000; text-decoration:none; }
a:visited{ color:#000; text-decoration:none; }
a:hover{ color:#000; text-decoration:none; }
.menu { height:59px;background:#474747 url(http://www.codefans.net/jscss/demoimg/200905/sub_menu_bg.jpg) 0 34px repeat-x; width:969px;}
.menu ul{ margin:0; padding:0; }
.menu ul li{ float:left; height:33px; position:relative;}
.menu ul li a{cursor:pointer;border-top: #666 1px solid;padding:0 20px;float: left;color: #989898;line-height: 33px;margin-right: 2px;height: 33px;text-align: center;background: #363636;}
.menu ul li a:link{ color:#989898; text-decoration:none; }
.menu ul li a:visited{ color:#989898; text-decoration:none; }
.menu ul li a:hover{ color:#fff; border-top: #999 1px solid; background:#363636 url(http://www.codefans.net/jscss/demoimg/200905/cx_menu_hover.jpg) center bottom no-repeat ; }
.menu ul li div{ position: absolute; width:600px; left:10px;; top:34px;height:25px; display:none;}
.menu ul li div a{ float:none; display:inline; padding:0 10px;margin-right: 8px; background:none; border:none; line-height: 24px;}
.menu ul li div a:link,.menu ul li div a:visited{color:#444;}
.menu ul li div a:hover{ background:none; border:none;color:#000; text-decoration:underline;}
.menu ul .block div{ display:block;}
.menu a:hover.mbtn1,.menu .mbtn1ok,.menu mbtn1{ border-top: #ff8c00 1px solid; }
.menu a:hover.mbtn2,.menu .mbtn2{ border-top: #c71585 1px solid; }
.menu a:hover.mbtn3,.menu .mbtn3{ border-top: #66cdaa 1px solid; }
.menu a:hover.mbtn4,.menu .mbtn4{ border-top: #9acd32 1px solid; }
.menu a:hover.mbtn5,.menu .mbtn5{ border-top: #1e90ff 1px solid; }
-->
</style>
</head>
<body>
<div id="menu" class="menu">
<ul>
<li><a id="mbtn1" class="mbtn1ok" href="http://www.codefans.net/">首 页</a></li>
<li><a id="mbtn2" href="">源码下载</a>
<div><a href="/other/lastupdate.shtml">最新更新</a> <a href="/other/top100.shtml">下载排行</a> <a href="/sort/index.shtml">源码分类</a></div>
</li>
<li><a id="mbtn3" href="">ASP</a>
<div><a href="/sort/list_1_87_1.shtml">AJAX</a> <a href="/sort/list_1_11_1.shtml">聊天留言</a> <a href="/sort/list_1_29_1.shtml">CMS系统</a></div>
</li>
<li><a id="mbtn4" href="">PHP</a>
<div><a href="/sort/list_2_35_1.shtml">企业建站</a> <a href="/sort/list_2_185_1.shtml">AJAX相关</a></div>
</li>
<li><a id="mbtn5" href="">电子书籍</a>
<div><a href="">ASP书籍</a> <a href="">PHP书籍</a> <a href="">AJAX书籍</a></div>
</li>
<li><a href="/jscss/">网页特效</a></li>
<li><a href="/service/ad.shtml">广告服务</a></li>
<li><a href="/guestbook/">网站留言</a></li>
<li><a href="/service/links.shtml">友情链接</a></li>
<li><a href="/sort/list_6_1.shtml">工具软件</a></li>
<li><a href="">English</a></li>
</ul>
</div>
<script type="text/javascript">
var menu = document.getElementById("menu");
var lis = menu.getElementsByTagName("li");
var las = menu.getElementsByTagName("a");
for(var i = 0; i < 6; i++)
{
lis[i].num = i;
lis[i].onmouseover = show;
}
function show()
{
var lias = lis[this.num].getElementsByTagName("a");
for(var i = 0; i < lis.length; i++)
{
lis[i].className = ""
}
for(var i = 0; i < las.length; i++)
{
las[i].className = ""
}
lis[this.num].className = "block";
lias[0].className = lias[0].id
}
</script>
</body>
</html>
- 大小: 11.8 KB
分享到:
相关推荐
jquery某企业黑色加橙色下拉二级导航菜单代码下载地址
js完善的二级菜单,通过js实现的二级折叠菜单.更加的方便,用着很舒服
jQuery黑色三级下拉导航菜单基于jquery-1.8.3.min.js和responsive-menu.js制作,鼠标经过菜单,显示二级,三级导航菜单。
二级导航菜单特效 有需要请留言 html+css
jquery蓝色圆角横向二级导航菜单代码
JS横向二级导航菜单 CSS样式控制样式
是制作网页的二级导航菜单。能够节省大家制作网页的时间,希望大家借鉴。
html实现好看的多种风格导航菜单(附源码),导航菜单,源码下载,分为顶部导航菜单,悬浮按钮菜单,右键功能菜单,左侧导航菜单四种导航菜单。每种导航菜单有至少三种风格,总共23种风格,各种风格都有,代码上手简单,...
用js制作一个js导航菜单,左侧纵向二级导航菜单,鼠标滑过当前选区高亮显示二级菜单内容,带点击展开和收缩按钮控制。内含js代码下载。
jquery实现二级导航,里面包括html,css和javascript代码,下载下来就可以直接使用。
jquery导航菜单制作横向二级导航菜单设置当前频道高亮特效
jQuery垂直下拉二级导航菜单 jQuery垂直下拉二级导航菜单 jQuery垂直下拉二级导航菜单 jQuery垂直下拉二级导航菜单 jQuery垂直下拉二级导航菜单
旅游网二级导航菜单代码基于jquery.1.11.2.min.js制作,鼠标经过悬停一级导航菜单显示对应的二级菜单,二级菜单相对于一级菜单居中显示,当二级菜单内容区域超出网页左侧区域时,页面左侧区域菜单定位在最左侧,菜单...
实现二级导航菜单栏效果,FragmentTabHost嵌套FragmentTabHost方.zip,太多无法一一验证是否可用,程序如果跑不起来需要自调,部分代码功能进行参考学习。
公司网站炫酷二级导航菜单基于prefixfree.min.js和CSS3制作,蓝色风格,适用于公司企业网站使用,鼠标经过一级菜单显示炫酷错综复杂效果二级下拉菜单。有网站首页、关于我们、产品中心、成功案例、客户留言、公司...
jQuery个性动画二级下拉导航菜单基于jquery1.8.3.min.js制作,鼠标经过显示二级下拉菜单。
CSS3水平二级导航菜单,纯CSS3制作,红色风格,鼠标经过显示二级菜单。
jquery带下划线滚动的二级导航菜单代码
滑动式二级导航菜单,非常实用。而且绝对清爽