div css 下拉菜单效果代码

 代码如下 复制代码

<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
<html xmlns="http://www.111cn.net/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>网页特效下拉菜单</title>
<style type="text/css">
* {
padding:0;
margin:0;
}
body {
font-family:verdana, sans-serif;
font-size:small;
}
#navigation, #navigation li ul {
list-style-type:none;
}
#navigation {
margin:20px;
}
#navigation li {
float:left;
text-align:center;
position:relative;
}
#navigation li a:link, #navigation li a:visited {
display:block;
text-decoration:none;
color:#000;
width:120px;
height:40px;
line-height:40px;
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#c5dbf2;
padding-left:10px;
}
#navigation li a:hover {
color:#fff;
background:#2687eb;
}
#navigation li ul li a:hover {
color:#fff;
background:#6b839c;
}
#navigation li ul {
display:none;
position:absolute;
top:40px;
left:0;
margin-top:1px;
width:120px;
}
#navigation li ul li ul {
display:none;
position:absolute;
top:0px;
left:130px;
margin-top:0;
margin-left:1px;
width:120px;
}
</style>
<script type="text/javascript">
function displaysubmenu(li) {
var submenu = li.getelementsbytagname("ul")[0];
submenu.style.display = "block";
}
function hidesubmenu(li) {
var submenu = li.getelementsbytagname("ul")[0];
submenu.style.display = "none";
}
</script>
</head>
<body>
<ul id="navigation">
<li onmouseo教程ver="displaysubmenu(this)" onmouseout="hidesubmenu(this)">
<a href="#">栏目1</a>
<ul>
<li><a href="#">栏目1->菜单1</a></li>
<li><a href="#">栏目1->菜单2</a></li>
<li><a href="#">栏目1->菜单3</a></li>
<li><a href="#">栏目1->菜单4</a></li>
</ul>
</li>
<li onmouseover="displaysubmenu(this)" onmouseout="hidesubmenu(this)">
<a href="#">栏目2</a>
<ul>
<li><a href="#">栏目2->菜单1</a></li>
<li><a href="#">栏目2->菜单2</a></li>
<li><a href="#">栏目2->菜单3</a></li>
<li><a href="#">栏目2->菜单4</a></li>
<li><a href="#">栏目2->菜单5</a></li>
</ul>
</li>
<li onmouseover="displaysubmenu(this)" onmouseout="hidesubmenu(this)">
<a href="#">栏目3</a>
<ul>
<li onmouseover="displaysubmenu(this)" onmouseout="hidesubmenu(this)">
<a href="#">栏目3->菜单1</a>
<ul>
<li><a href="#">菜单1->子菜单1</a></li>
<li><a href="#">菜单1->子菜单2</a></li>
<li><a href="#">菜单1->子菜单3</a></li>
<li><a href="#">菜单1->子菜单4</a></li>
</ul>
</li>
<li><a href="#">栏目3->菜单2</a></li>
<li onmouseover="displaysubmenu(this)" onmouseout="hidesubmenu(this)">
<a href="#">栏目3->菜单3</a>
<ul>
<li><a href="#">菜单3->子菜单1</a></li>
<li><a href="#">菜单3->子菜单2</a></li>
<li><a href="#">菜单3->子菜单3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>

导航菜单二

 代码如下 复制代码

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns=http://www.111cn.net/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=http://mb.111cn.net>聚焦凯撒</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="http://down.111cn.net">出游宝典</a> | <a href="#">网站地图</a></div>
    <div id="sub_5" class="undis" ></div>
    <div id="sub_6" class="undis" ></div>
</div>
</div>
</body>
</html>

 

时间： 2024-08-31 09:16:30

div css 下拉菜单效果代码的相关文章

黑蓝色CSS下拉菜单效果代码

Home About us Services Design Strategy Analysis Support Forums Contact Us

JS+CSS实现的经典圆角下拉菜单效果代码_javascript技巧

本文实例讲述了JS+CSS实现的圆角下拉菜单效果代码.分享给大家供大家参考,具体如下: 相信不少朋友会喜欢这一款菜单,CSS+JS实现的圆角下拉菜单,没有使用任何修饰性的图片哦,圆角完全是用JS完成的,因此代码多了些,想使用的朋友把JS文件提取出来另存,这样更合理些. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-jd-cicle-style-button-demo/ 具体代码如下: <!DOCTYPE html PUBLIC &qu

js+css实现超简洁的二级下拉菜单效果代码_javascript技巧

本文实例讲述了js+css实现超简洁的二级下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一个很简洁的CSS+JavaScript二级菜单,没有使用过多的修饰素材,尽量不调用外部图片,简洁大方,而且便于二级开发完善,最初是一个政府网站上的菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-simple-2jxl-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//

jQuery实现灰蓝风格标准二级下拉菜单效果代码_jquery

本文实例讲述了jQuery实现灰蓝风格标准二级下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的标准型二级菜单,是漂亮的灰-蓝风格下拉级联菜单,代码经过了完美修正,目前兼容性已经很不错了,甚至不用修改,拷贝代码你就可以用了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-blue-color-style-nav-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &quo

js实现点击向下展开的下拉菜单效果代码_javascript技巧

本文实例讲述了js实现点击向下展开的下拉菜单效果代码.分享给大家供大家参考.具体如下: 这里介绍js实现点击向下展开的下拉菜单特效代码,无调用jQuery,真正的JS下拉菜单,兼容性方面未做测试,觉得有用处的自己测试修正吧,本文仅提供基础的代码供参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-click-show-down-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//

jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码_jquery

本文实例讲述了jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码.分享给大家供大家参考.具体如下: 这里介绍的是一款黑红带渐变的网站下滑导航菜单,基于jquery实现的下滑线导航菜单,鼠标经过主菜单的时候,下滑线就会自动跟向哪里,如果该菜单有两级子菜单,则同样会显示下滑菜单,带渐变效果.菜单操作很灵敏,使用有自定义的封装插件SuperSlide.2.1.js,所在使用时请自行下载这个JS插件. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015

jQuery实现的多级下拉菜单效果代码_jquery

本文实例讲述了jQuery实现的多级下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一款jQuery多级下拉菜单,在支持html5的浏览器中测试你会发现本菜单很智能,会自动判断浏览器边界来改变下拉菜单的显示方向,在ie下没发现此效果.整体上来看,和Windows系统的"经典"主题时的菜单风格特别相似,配合图片,整体效果还是相当有专业水准的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-nlevel-nav-me

jquery实现适用于门户站的导航下拉菜单效果代码_jquery

本文实例讲述了jquery实现适用于门户站的导航下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一款应用了jQuery+CSS共同编写实现的网页导航菜单,采用浅蓝色的布局方式,整体格调淡雅清新,简洁大方,不失为一款好菜单.本特点的特点是兼容好,在火狐/IE下都有良好表现,而且在有二级子菜单的地方,主菜单上都会有一个小三角标识,很好的提升了用户体验,相信你也会喜欢的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-web-i

jQuery实现的fixedMenu下拉菜单效果代码_jquery

本文实例讲述了jQuery实现的fixedMenu下拉菜单效果代码.分享给大家供大家参考.具体如下: 这里演示了仿Google风格的下拉菜单,其核心实际上是jquery.fixedMenu菜单,使用了jquery.fixedMenu.js和fixedMenu_style.css文件,已在代码中加注释,你可以从本代码中分享现这两个文件,然后重新引用.本菜单在鼠标点击主菜单的时候可向下显示二级子菜单,在火狐或Chrome浏览器下,还可显示菜单阴影效果. 运行效果截图如下: 在线演示地址如下: htt