二级下弹出菜单
2012-04-01 19:42
197 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>jQuery suckerFish</title>
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
<link rel="stylesheet" type="text/css" href="star-light/star-light.css" media="all" />
<script src="jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#nav-one li").hover(
function () { $("ul", this).fadeIn("slow"); },
function () { }
);
});
});
};
</script>
<style type="text/css">
/* Navigation */
.nav, .nav ul {list-style:none;margin:0;padding:5px;}
.nav {font-family:Arial,Helvetica,sans-serif;z-index:100;position:relative;}
.nav li { float:left;margin:0;padding:0;position:relative;}
.nav ul {background:#565656;border-bottom:1pxsolid#000;list-style:none;margin:0;width:60px;position:absolute;top:-999em;left:-1px;}
.nav li:hover ul,.nav li.sfHover ul {top:18px;}
.nav ul li {border:0;float:none;}
</style>
</head>
<body>
<h1><a href="#">jQuery</a> » SuckerFish Style</h1>
<h2>Purpose</h2>
<p>Replicate Suckerfish Menus.</p>
<h3>Original Code</h3>
<h2>Sample Markup</h2>
<h4>Sample 1 - One Level</h4>
<div style="border:1px solid red"> 0
<div >1</div>
<ul id="nav-one" class="nav">
<li>
<img src="pdf.png" />
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</li>
<li> 1
</li>
<li>2
</li>
<li>3
</li>
</ul>
<br/> <br/>
<div></div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>jQuery suckerFish</title>
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
<link rel="stylesheet" type="text/css" href="star-light/star-light.css" media="all" />
<script src="jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#nav-one li").hover(
function () { $("ul", this).fadeIn("slow"); },
function () { }
);
});
});
};
</script>
<style type="text/css">
/* Navigation */
.nav, .nav ul {list-style:none;margin:0;padding:5px;}
.nav {font-family:Arial,Helvetica,sans-serif;z-index:100;position:relative;}
.nav li { float:left;margin:0;padding:0;position:relative;}
.nav ul {background:#565656;border-bottom:1pxsolid#000;list-style:none;margin:0;width:60px;position:absolute;top:-999em;left:-1px;}
.nav li:hover ul,.nav li.sfHover ul {top:18px;}
.nav ul li {border:0;float:none;}
</style>
</head>
<body>
<h1><a href="#">jQuery</a> » SuckerFish Style</h1>
<h2>Purpose</h2>
<p>Replicate Suckerfish Menus.</p>
<h3>Original Code</h3>
<h2>Sample Markup</h2>
<h4>Sample 1 - One Level</h4>
<div style="border:1px solid red"> 0
<div >1</div>
<ul id="nav-one" class="nav">
<li>
<img src="pdf.png" />
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</li>
<li> 1
</li>
<li>2
</li>
<li>3
</li>
</ul>
<br/> <br/>
<div></div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- kendo 底部弹出选择菜单，可用作底部一级、二级导航kendoNotification
- Jquery css div弹出二级菜单代码
- 第四天 纵向导航菜单及二级弹出菜单
- 纯css实现鼠标感应弹出二级菜单
- jquery二级导航菜单--可弹出下拉层 UL/LI结构
- Android 二级动画弹出菜单
- 纵向导航菜单及二级弹出菜单
- CSS弹出二级多列菜单和DIV布局实例 - 仿IBM官网首页
- 纯CSS(无JS)实现的二级弹出菜单效果代码
- 第四天 纵向导航菜单及二级弹出菜单
- 纵向导航二级弹出菜单
- web标准(复习)--4 纵向导航菜单及二级弹出菜单
- Web标准：四、纵向导航菜单及二级弹出菜单
- 最基本的：二级dropdown弹出菜单
- CSS弹出二级菜单
- VC 弹出菜单 动态添加二级菜单
- 纵向导航菜单及二级弹出菜单 样式
- ZENCART显示二级菜单导航 .菜单树 弹出
- div+css 纵向导航菜单及二级菜单弹出
- 转：jQuery弹出二级菜单