<!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>CSS Menus (with some help from jQuery) › qrayg.com</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.0; user-scalable=1;" />
<link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
<link rel="stylesheet" href="nav-h.css" type="text/css" media="screen" />
<link rel="stylesheet" href="nav-v.css" type="text/css" media="screen" />
<script language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<!--[if gte IE 5.5]><script language="JavaScript" src="jquery.ienav.js" type="text/javascript"></script><![endif]-->
<script language="JavaScript" type="text/javascript">
$(document).ready(function() {
$('.links li code').hide();
$('.links li p').click(function() {
$(this).next().slideToggle('fast');
});
});
</script>
</head>
<body>
<div style="width:100%; margin:0px auto; line-height:30px">
<div style="height:30px; line-height:30px;width:960px;">
<div style="float:left"><a href="http://www.whkge.com/forum.php?mod=forumdisplay&fid=67" target="_blank" style="color:#069">返回javascript+jquery特效列表</a> <a href="http://www.icoioo.com">技术支持：南京爱搜</a></div>
<div style="float:right">社区联盟：<a href="http://www.toodii.com">昆明社区</a> <a href="http://www.whkge.com">武汉k歌网</a> <a style=" color:#900; text-decoration:none; font-weight:600" href="http://www.whkge.com/portal.php?mod=topic&topicid=1">我要加入联盟</a></div>
</div>
<div style="width:960px; height:90px; text-align:left">
<script type="text/javascript"><!--
google_ad_client = "pub-1678334037855176";
/* 728x90, 08-2-28 */
google_ad_slot = "4523092392";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</div>
<div style="clear:both"></div>
<div id="page">
<div id="head">
<h1>CSS Menus v2 <span>(with some help from jQuery)</span></h1>
</div>
<div id="body">
<div id="content">
<p>The following dynamic menu examples are driven completely by <acronym title="Cascading Style Sheets">CSS</acronym> and work in all modern browsers<strong>*</strong>.</p>
<h5>CSS Menus v2 Features</h5>
<ul>
<li>Up to 3 sub menus</li>
<li>Hover Persistence</li>
<li>Uses jQuery for <acronym title="Internet Explorer">IE</acronym> fixes</li>
</ul>
<h2>Horizontal Example</h2>
<ul id="navmenu-h">
<li><a href="#">Home</a></li>
<li><a href="#">Work +</a>
<ul>
<li><a href="#">Websites +</a>
<ul>
<li><a href="#">qrayg.com</a></li>
<li><a href="#">craigerskine.com</a></li>
<li><a href="#">dt.qrayg.com</a></li>
<li><a href="#">legendofmana.info</a></li>
</ul>
</li>
<li><a href="#">Sketchbook</a></li>
<li><a href="#">Free Interfaces</a></li>
</ul>
</li>
<li><a href="#">Learn +</a>
<ul>
<li><a href="#">Fireworks +</a>
<ul>
<li><a href="#">Aqua Button</a></li>
<li><a href="#">Aqua Button 2</a></li>
<li><a href="#">Water Drop</a></li>
<li><a href="#">Light FX</a></li>
<li><a href="#">Light FX2</a></li>
</ul>
</li>
<li><a href="#">CSS +</a>
<ul>
<li><a href="#">CSS Menus</a></li>
<li><a href="#">Sprite Nav</a></li>
<li><a href="#">@import</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
<ul class="links">
<li>
<p>View the Horizontal CSS</p>
<code>/*
Author: Craig Erskine
Description: Dynamic Menu System - Horizontal/Vertical
*/
ul#navmenu-h { margin: 0; padding: 0; list-style: none; position: relative; }
ul#navmenu-h ul {
width: 160px; /* Sub Menu Width */
margin: 0;
list-style: none;
display: none;
position: absolute;
top: 100%;
left: 0;
}
ul#navmenu-h ul ul,ul#navmenu-h ul ul ul { top: 0; left: 100%; }
ul#navmenu-h li { float: left; display: inline; position: relative; }
ul#navmenu-h ul li { width: 100%; display: block; }
/* Root Menu */
ul#navmenu-h a {
border-top: 1px solid #FFF;
border-right: 1px solid #FFF;
padding: 6px;
float: left;
display: block;
background: #DDD;
color: #666;
font: bold 11px Arial, sans-serif;
text-decoration: none;
height: 1%;
}
/* Root Menu Hover Persistence */
ul#navmenu-h a:hover,ul#navmenu-h li:hover a,ul#navmenu-h li.iehover a {
background: #BBB;
color: #FFF;
}
/* 2nd Menu */
ul#navmenu-h li:hover li a,ul#navmenu-h li.iehover li a {
float: none;
background: #BBB;
}
/* 2nd Menu Hover Persistence */
ul#navmenu-h li:hover li a:hover,ul#navmenu-h li:hover li:hover a,ul#navmenu-h li.iehover li a:hover,ul#navmenu-h li.iehover li.iehover a {
background: #999;
}
/* 3rd Menu */
ul#navmenu-h li:hover li:hover li a,ul#navmenu-h li.iehover li.iehover li a {
background: #999;
}
/* 3rd Menu Hover Persistence */
ul#navmenu-h li:hover li:hover li a:hover,ul#navmenu-h li:hover li:hover li:hover a,ul#navmenu-h li.iehover li.iehover li a:hover,ul#navmenu-h li.iehover li.iehover li.iehover a {
background: #666;
}
/* 4th Menu */
ul#navmenu-h li:hover li:hover li:hover li a,ul#navmenu-h li.iehover li.iehover li.iehover li a {
background: #666;
}
/* 4th Menu Hover */
ul#navmenu-h li:hover li:hover li:hover li a:hover,ul#navmenu-h li.iehover li.iehover li.iehover li a:hover {
background: #333;
}
/* Hover Function - Do Not Move */
ul#navmenu-h li:hover ul ul,ul#navmenu-h li:hover ul ul ul,ul#navmenu-h li.iehover ul ul,ul#navmenu-h li.iehover ul ul ul { display: none; }
ul#navmenu-h li:hover ul,ul#navmenu-h ul li:hover ul,ul#navmenu-h ul ul li:hover ul,ul#navmenu-h li.iehover ul,ul#navmenu-h ul li.iehover ul,ul#navmenu-h ul ul li.iehover ul { display: block; }</code>
</li>
<li>
<p>View the JavaScript (for IE)</p>
<code>$(document).ready(function(){
$("#navmenu-h li,#navmenu-v li").hover(
function() { $(this).addClass("iehover"); },
function() { $(this).removeClass("iehover"); }
);
});</code>
</li>
</ul>
<h2>Vertical Example</h2>
<ul id="navmenu-v">
<li><a href="#">Home</a></li>
<li><a href="#">Work +</a>
<ul>
<li><a href="#">Websites +</a>
<ul>
<li><a href="#">qrayg.com</a></li>
<li><a href="#">craigerskine.com</a></li>
<li><a href="#">dt.qrayg.com</a></li>
<li><a href="#">legendofmana.info</a></li>
</ul>
</li>
<li><a href="#">Sketchbook</a></li>
<li><a href="#">Free Interfaces</a></li>
</ul>
</li>
<li><a href="#">Learn +</a>
<ul>
<li><a href="#">Fireworks +</a>
<ul>
<li><a href="#">Aqua Button</a></li>
<li><a href="#">Aqua Button 2</a></li>
<li><a href="#">Water Drop</a></li>
<li><a href="#">Light FX</a></li>
<li><a href="#">Light FX2</a></li>
</ul>
</li>
<li><a href="#">CSS +</a>
<ul>
