非常酷的导航菜单

2009-11-23 导航菜单 224℃

<!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>
<title>Menu Design 3</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content="CSS menus free for all" />
<meta name="keywords" content="CSS, css, CSS menu, CSS design, css design, CSS menu design, e-lusion, Ian, ian, e-lusion.com" />
<meta name="author" content="Ian Main" />
<meta name="Copyright" content="Creative Commons - http://creativecommons.org/licenses/by/2.0/" />
<style type="text/css">
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
font-size: 80%;
font-weight: bold;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
/* =-=-=-=-=-=-=-[Menu Three]-=-=-=-=-=-=-=- */
#menu3 {
width: 200px;
border: 1px solid #ccc;
margin: 10px;
}
#menu3 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu3 li a:link, #menu3 li a:visited {
color: #888;
display: block;
background: url(http://www..com/forum/img/menu3/images/menu3.gif);
padding: 8px 0 0 30px;
}
#menu3 li a:hover, #menu3 li a:active {
color: #283A50;
background: url(http://www..com/forum/img/menu3/images/menu3.gif) 0 -32px;
padding: 8px 0 0 30px;
}
</style>
</head>
<body>
<div id="menu3">
<ul>
<li><a href="#1" title="Home">Home</a></li>
<li><a href="#2" title="About">About</a></li>
<li><a href="#3" title="Services">Services</a></li>
<li><a href="#4" title="Portfolio">Portfolio</a></li>
<li><a href="#5" title="Store">Store</a></li>
<li><a href="http://www..com/forum/img/menu3/menu3.zip" title="Download">Download Menu</a></li>
</ul>
</div>
</body>
</html></font>

相关特效代码

热门特效代码: 三级竖向展开/收缩导航菜单; 鼠标指向弹出菜单; jQuery 弹出菜单层; CSS二级下拉导航菜单; CSS做的垂直导航菜单效果; 横向二级导航菜单; 仿google首页下端图片文字动画导; 导航链接菜单间隔闪烁; 动态翻滚的导航条[酷比flash]; 纯CSS的三级联动级联菜单

推荐特效代码: CSS+div+js组合强大实现超酷菜单; 动态翻滚的导航条[酷比flash]; CSS横向下拉菜单; 微软风格的CSS横向菜单; 立体的CSS按钮菜单效果; 左侧隐藏的菜单