<!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=gb2312" />
<title>nav</title>
<script type="text/javascript">
<!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+="on";
}
node.onmouseout=function() {
this.className=this.className.replace("on", "");
}
}
}
}
}
window.onload=startList;
-->
</script>
<style type="text/css">
<!--
body {
font-size: 12px
font-family: Arial,Verdana,Helvetica,sans-serif;
}
ul{
margin: 0;
padding: 0;
list-style: none;
width: 200px;
}
ul li {
position: relative;
}
ul li ul {
position: absolute;
left: 199px;
top: 0;
display: none;
list-style: none;
width: 200px;
margin: 0;
padding: 0;
}
ul li a {
display: block;
text-decoration: none;
background: #cccccc;
padding:5px 0 5px 20px;
border: 1px solid #ffffff;
border-bottom: 0;
color:#666666;
}
ul li a:hover {
background: #cc0000;
color:#ffffff;
font-weight:bold;
}
* html ul li {
float: left;
height: 1%;
}
* html ul li a {
height: 1%;
}
li:hover ul, li.on ul {
display: block;
}
-->
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">menu1</a>
<ul class="nav2">
<li><a href="#">first</a></li>
<li><a href="#">second</a></li>
</ul>
</li>
<li><a href="#">menu2</a>
<ul class="nav2">
<li><a href="#">first</a></li>
<li><a href="#">second</a></li>
<li><a href="#">third</a></li>
</ul>
</li>
<li><a href="#">menu3</a>
<ul class="nav2">
<li><a href="#">first</a></li>
<li><a href="#">second</a></li>
<li><a href="#">third</a></li>
<li><a href="#">forth</a></li>
<li><a href="#">fifth</a></li>
</ul>
</li>
<li><a href="#">menu4</a>
<ul class="nav2">
<li><a href="#">first</a></li>
<li><a href="#">second</a></li>
<li><a href="#">third</a></li>
<li><a href="#">forth</a></li>
<li><a href="#">fifth</a></li>
<li><a href="#">sixth</a></li>
</ul>
</li>
</ul>
</body>
</html>
- 大小: 13.8 KB
分享到:
相关推荐
当鼠标悬浮时显示二级菜单,这种类似的效果,想必大家在浏览网页时经常会遇到吧,下面有个示例,大家可以看看
水平导航菜单,当鼠标移动上去,会显示每个菜单下的二级菜单效果。 采用Html+JavaScript
wpf自定义漂亮的二级菜单,数据加载方便,可扩展,适合企业及项目
使用jq实现二级菜单效果,jq下拉菜单效果,这个下拉菜单,一般大多数人都选择使用ui框架,但是也有人还是需要jq实现的,写个demo分享给大家
NULL 博文链接:https://ice-cream.iteye.com/blog/798083
简单无任何修饰效果的,鼠标移动一级菜单上面显示二级菜单的js。 可拓展性高,欢迎下载使用。
粉色二级下拉菜单列表效果是一款电子商务网站的粉色二级下拉菜单列表效果代码。
京东二级菜单效果,绝对的原版。从京东主站扣取,欢迎大家使用
实现二级导航菜单栏效果,FragmentTabHost嵌套FragmentTabHost方.zip,太多无法一一验证是否可用,程序如果跑不起来需要自调,部分代码功能进行参考学习。
非常酷炫的jQuery+css超滑二级下拉菜单,用来做网站的朋友,一定用的上。
php代码实现二级联动下拉菜单效果 php代码实现二级联动下拉菜单效果 php代码实现二级联动下拉菜单效果 php代码实现二级联动下拉菜单效果
JavaScript实现轮播特效 + 二级菜单效果(代码),资源整全。 - Lux_Sun CSDN Blog:https://blog.csdn.net/Dream_Weave
用纯JS实现二级菜单效果 本文实例为大家分享了JS实现二级菜单效果的具体代码,供大家参考,具体内容如下 js点击出现二级菜单,点击二级菜单主菜单换成二级菜单 点击出现二级菜单 <style> *{ margin:0px auto;...
二级横向导航栏菜单效果,鼠标移动到文字上,二级导航横向展开,移走后自动消失
jquery蓝色圆角横向二级导航菜单代码
使用javascript制作简易的二级菜单,比较全面,想制作菜单的不同效果可以修改里面的css样式
HTML5 CSS3 鼠标悬停动画展开的二级菜单,把你的鼠标放在菜单上,就可看到子菜单展开的动画效果了,十分好看漂亮。
简单的二级菜单,自己可以直接拿来用,很好改写
jQuery实现精美二级菜单,增加网页的美观效果
一个实现android二级菜单,三级菜单,多级菜单的实例,主要使用expandablelistview控件,很不错的效果,分享了