<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>18zhao网页特效演示,CSS 制作的三级菜单</title>
<style type="text/css">
<!--
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#menu {
background-color: #FEF0E5;
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFFF', endColorStr='#FEF0E5', gradientType='0');
}
#nav, #nav ul {
float:left; /* 菜单总体水平位置 */
clear:right;
list-style:none;
/*line-height:22px; 一级菜单高 */
/*background: #eee; 所有菜单移出色 */
/*font-weight: bold;8*/
padding:0px;
margin:0px;
/*border:1px solid #ccc;
border-right: 0px;*/
}
#nav ul ul{
/*border:1px solid #ccc;*/
border-top:0px;
border-right:0px;
}
#nav a {
width:120px;
display:block;
color:#333;
text-decoration:none;
text-align:left;
/*border-right:1px solid #CCC;*/
padding: 3px 4px 3px 7px;
}
#nav a:hover{
color:#000;
border:1px solid #CCC;
margin: 0px;
padding: 3px 5px 3px 6px;
background-color: #f1f1f1;
text-decoration: none;
} /* 所有 a:hover 字体样式 */
#nav a.selected{background:url(flyout_arrow.gif) no-repeat right 50%;} /* 下拉图标 */
#nav li {
float:none;
clear:right;
height:22px;
width:120px;
}
#nav li ul li{
float:none;
clear:right;
height:22px;
width:120px;
}
#nav li ul { /* 二级弹出位 */
position:absolute;
margin:-22px 0px 0px 119px;
padding:0;
left:-9999em;
width:120px;
font-weight:normal;
display:block;
border:1px solid #CCCCCC;
background:#fff;
}
/* 二级菜单宽 */
#nav li ul a {
width:120px; /* 二级菜单宽 */
/*line-height:24px; 二级菜单高
border:1px solid #CCC;*/
height:22px;
text-align:left;
margin: 0px;
}
#nav li ul ul {
margin:-22px 0px 0px 120px;
border:1px solid #CCC;
} /* 三级弹出位 */
#nav li:hover ul ul,#nav li.sfhover ul ul{left:-9999em;}
#nav li:hover ul,#nav li li:hover ul,#nav li.sfhover ul, #nav li li.sfhover ul{
left:auto;
height:22px;
} /* 所有弹出菜单自动左边距 */
#nav li:hover, #nav li.sfhover {
background:#f1f1f1;
height:22px;
}
/* 所有悬浮样式 */
-->
</style>
<script type="text/javascript"><!--//--><![CDATA[/><!--
img1=new Image();
img1.src="flyout_arrow.gif";
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
window.onload=sfHover;
//--><!]]></script>
</head>
<body>
<table width="120" border="0" cellspacing="0" cellpadding="0" >
<tr>
<td valign="top" id="menu">
<ul id="nav">
<li><a href="http://www.18zhao.com/" target="_blank">
<span style="font-size: 9pt">首页</span></a></li>
<li><a href="#" target="_blank" class="selected">
<span style="font-size: 9pt">项目需求合作</span></a><span style="font-size: 9pt">
</span>
<ul>
<li ><a href="#" class="selected"><span style="font-size: 9pt">网站项目
</span> </a>
<ul>
<li><a href="#">
<span style="font-size: 9pt">网站项目 </span> </a>
<li><a href="#">
<span style="font-size: 9pt">整站项目</span></a></li>
<li><a href="#">
<span style="font-size: 9pt">网站分析策划</span></a></li>
<li><a href="#" target="_blank">
<span style="font-size: 9pt">网页设计制作</span></a></li>
<li><a href="#">
<span style="font-size: 9pt">网站制作与开发</span></a></li>
<li><a href="#">
<span style="font-size: 9pt">网站flash动画</span></a></li>
<li><a href="#">
<span style="font-size: 9pt">网站服务器</span></a></li>
</ul>
</li>
<li ><a href="#" class="selected"><span style="font-size: 9pt">多媒体设计制作</span></a><span style="font-size: 9pt">
</span>
<ul>
<li><a href="#">
<span style="font-size: 9pt">网站项目 </span> </a>
<li><a href="#">
<span style="font-size: 9pt">平面设计</span></a></li>
<li><a href="#">
<span style="font-size: 9pt">CAD工程图设计</span></a></li>
<li><a href="#">
<span style="font-size: 9pt">3D建模与动画</span></a></li>
<li><a href="#">
<span style="font-size: 9pt">Flash游戏动画</span></a></li>
<li><a href="#">
<span style="font-size: 9pt">音效及音乐</span></a></li>
<li><a href="#">
<span style="font-size: 9pt">游戏原画设定</span></a></li>
</ul>
</li>
<li ><a href="#" class="selected"><span style="font-size: 9pt">软件开发</span></a><span style="font-size: 9pt">
</span>
<ul>
<li><a href="#">
<span style="font-size: 9pt">应用软件</span></a></li>
<li><a href="#">
<span style="font-size: 9pt">游戏开发</span></a></li>
<li><a href="#">
<span style="font-size: 9pt">驱动程序</span></a></li>
<li><a href="#">
<span style="font-size: 9pt">嵌入式开发</span></a></li>
<li><a href="#">
<span style="font-size: 9pt">手机开发</span></a></li>
<li><a href="#">
<span style="font-size: 9pt">单片机</span></a></li>
<li><a href="#">
<span style="font-size: 9pt">数据库设计</span></a></li>
<li><a href="http://www.18zhao.com/">
<span style="font-size: 9pt">代码移植</span></a></li>
</ul>
</li>
<li><a href="http://www.18zhao.com/"><span style="font-size: 9pt">网络硬件</span></a></li>
</ul>
</li>
<li><a href="http://www.18zhao.com/" target="_blank" class="selected">
<span style="font-size: 9pt">信息与知识</span></a><span style="font-size: 9pt">
</span>
<ul>
<li><a class="selected" href="http://www.18zhao.com/"><span style="font-size: 9pt">信息与知识</span></a><span style="font-size: 9pt">
</span>
<ul>
<li><a href="http://www.18zhao.com/">
<span style="font-size: 9pt">实用信息与工具 </span> </a></li>
<li><a href="http://www.18zhao.com/">
<span style="font-size: 9pt">新闻动态</span></a></li>
<li><a href="http://www.18zhao.com/">
<span style="font-size: 9pt">知识与技能</span></a></li>
<li><a href="http://www.18zhao.com/">
<span style="font-size: 9pt">设计制作与欣赏</span></a></li>
<li><a href="http://www.18zhao.com/">
<span style="font-size: 9pt">项目交易经验谈</span></a></li>
<li><a href="http://www.18zhao.com/">
<span style="font-size: 9pt">下载</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://www.18zhao.com/">
<span style="font-size: 9pt">优秀作品欣赏</span></a></li>
<li><a href="http://www.18zhao.com/" target="_blank">
<span style="font-size: 9pt">招骋</span></a></li>
<li><a href="http://www.18zhao.com/">
<span style="font-size: 9pt">关于本站</span></a></li>
</ul>
</td>
</tr>
</table>
</body>
</html>
<a href="http://www.18zhao.com/texiao/">欢迎访问18zhao网页特效集</a>
本文来自:18兆(www.18zhao.com) 原文链接:http://js.18zhao.com/daohangcaidan/201001/6237.html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>18zhao网页特效演示,CSS 制作的三级菜单</title>
<style type="text/css">
<!--
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#menu {
background-color: #FEF0E5;
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFFF', endColorStr='#FEF0E5', gradientType='0');
}
#nav, #nav ul {
float:left; /* 菜单总体水平位置 */
clear:right;
list-style:none;
/*line-height:22px; 一级菜单高 */
/*background: #eee; 所有菜单移出色 */
/*font-weight: bold;8*/
padding:0px;
margin:0px;
/*border:1px solid #ccc;
border-right: 0px;*/
}
#nav ul ul{
/*border:1px solid #ccc;*/
border-top:0px;
border-right:0px;
}
#nav a {
width:120px;
display:block;
color:#333;
text-decoration:none;
text-align:left;
/*border-right:1px solid #CCC;*/
padding: 3px 4px 3px 7px;
}
#nav a:hover{
color:#000;
border:1px solid #CCC;
margin: 0px;
padding: 3px 5px 3px 6px;
background-color: #f1f1f1;
text-decoration: none;
} /* 所有 a:hover 字体样式 */
#nav a.selected{background:url(flyout_arrow.gif) no-repeat right 50%;} /* 下拉图标 */
#nav li {
float:none;
clear:right;
height:22px;
width:120px;
}
#nav li ul li{
float:none;
clear:right;
height:22px;
width:120px;
}
#nav li ul { /* 二级弹出位 */
position:absolute;
margin:-22px 0px 0px 119px;
padding:0;
left:-9999em;
width:120px;
font-weight:normal;
display:block;
border:1px solid #CCCCCC;
background:#fff;
}
/* 二级菜单宽 */
#nav li ul a {
width:120px; /* 二级菜单宽 */
/*line-height:24px; 二级菜单高
border:1px solid #CCC;*/
height:22px;
text-align:left;
margin: 0px;
}
#nav li ul ul {
margin:-22px 0px 0px 120px;
border:1px solid #CCC;
} /* 三级弹出位 */
#nav li:hover ul ul,#nav li.sfhover ul ul{left:-9999em;}
#nav li:hover ul,#nav li li:hover ul,#nav li.sfhover ul, #nav li li.sfhover ul{
left:auto;
height:22px;
} /* 所有弹出菜单自动左边距 */
#nav li:hover, #nav li.sfhover {
background:#f1f1f1;
height:22px;
}
/* 所有悬浮样式 */
-->
</style>
<script type="text/javascript"><!--//--><![CDATA[/><!--
img1=new Image();
img1.src="flyout_arrow.gif";
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
window.onload=sfHover;
//--><!]]></script>
</head>
<body>
<table width="120" border="0" cellspacing="0" cellpadding="0" >
<tr>
<td valign="top" id="menu">
<ul id="nav">
<li><a href="http://www.18zhao.com/" target="_blank">
<span style="font-size: 9pt">首页</span></a></li>
<li><a href="#" target="_blank" class="selected">
<span style="font-size: 9pt">项目需求合作</span></a><span style="font-size: 9pt">
</span>
<ul>
<li ><a href="#" class="selected"><span style="font-size: 9pt">网站项目
</span> </a>
<ul>
<li><a href="#">
<span style="font-size: 9pt">网站项目 </span> </a>
<li><a href="#">
<span style="font-size: 9pt">整站项目</span></a></li>
<li><a href="#">
<span style="font-size: 9pt">网站分析策划</span></a></li>
<li><a href="#" target="_blank">
<span style="font-size: 9pt">网页设计制作</span></a></li>
<li><a href="#">
<span style="font-size: 9pt">网站制作与开发</span></a></li>
<li><a href="#">
<span style="font-size: 9pt">网站flash动画</span></a></li>
<li><a href="#">
<span style="font-size: 9pt">网站服务器</span></a></li>
</ul>
</li>
<li ><a href="#" class="selected"><span style="font-size: 9pt">多媒体设计制作</span></a><span style="font-size: 9pt">
</span>
<ul>
<li><a href="#">
<span style="font-size: 9pt">网站项目 </span> </a>
<li><a href="#">
<span style="font-size: 9pt">平面设计</span></a></li>
<li><a href="#">
<span style="font-size: 9pt">CAD工程图设计</span></a></li>
<li><a href="#">
<span style="font-size: 9pt">3D建模与动画</span></a></li>
<li><a href="#">
<span style="font-size: 9pt">Flash游戏动画</span></a></li>
<li><a href="#">
<span style="font-size: 9pt">音效及音乐</span></a></li>
<li><a href="#">
<span style="font-size: 9pt">游戏原画设定</span></a></li>
</ul>
</li>
<li ><a href="#" class="selected"><span style="font-size: 9pt">软件开发</span></a><span style="font-size: 9pt">
</span>
<ul>
<li><a href="#">
<span style="font-size: 9pt">应用软件</span></a></li>
<li><a href="#">
<span style="font-size: 9pt">游戏开发</span></a></li>
<li><a href="#">
<span style="font-size: 9pt">驱动程序</span></a></li>
<li><a href="#">
<span style="font-size: 9pt">嵌入式开发</span></a></li>
<li><a href="#">
<span style="font-size: 9pt">手机开发</span></a></li>
<li><a href="#">
<span style="font-size: 9pt">单片机</span></a></li>
<li><a href="#">
<span style="font-size: 9pt">数据库设计</span></a></li>
<li><a href="http://www.18zhao.com/">
<span style="font-size: 9pt">代码移植</span></a></li>
</ul>
</li>
<li><a href="http://www.18zhao.com/"><span style="font-size: 9pt">网络硬件</span></a></li>
</ul>
</li>
<li><a href="http://www.18zhao.com/" target="_blank" class="selected">
<span style="font-size: 9pt">信息与知识</span></a><span style="font-size: 9pt">
</span>
<ul>
<li><a class="selected" href="http://www.18zhao.com/"><span style="font-size: 9pt">信息与知识</span></a><span style="font-size: 9pt">
</span>
<ul>
<li><a href="http://www.18zhao.com/">
<span style="font-size: 9pt">实用信息与工具 </span> </a></li>
<li><a href="http://www.18zhao.com/">
<span style="font-size: 9pt">新闻动态</span></a></li>
<li><a href="http://www.18zhao.com/">
<span style="font-size: 9pt">知识与技能</span></a></li>
<li><a href="http://www.18zhao.com/">
<span style="font-size: 9pt">设计制作与欣赏</span></a></li>
<li><a href="http://www.18zhao.com/">
<span style="font-size: 9pt">项目交易经验谈</span></a></li>
<li><a href="http://www.18zhao.com/">
<span style="font-size: 9pt">下载</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://www.18zhao.com/">
<span style="font-size: 9pt">优秀作品欣赏</span></a></li>
<li><a href="http://www.18zhao.com/" target="_blank">
<span style="font-size: 9pt">招骋</span></a></li>
<li><a href="http://www.18zhao.com/">
<span style="font-size: 9pt">关于本站</span></a></li>
</ul>
</td>
</tr>
</table>
</body>
</html>
<a href="http://www.18zhao.com/texiao/">欢迎访问18zhao网页特效集</a>
本文来自:18兆(www.18zhao.com) 原文链接:http://js.18zhao.com/daohangcaidan/201001/6237.html
- css-_menu.rar (2 KB)
- 下载次数: 4
发表评论
-
JSON.parse() 与 eval()
2012-01-12 11:31 15996JSON(JavaScript Object Notation ... -
jsp端自动下载并保存图片文件
2011-04-21 23:38 1521JScript code <script languag ... -
iFrame只要竖滚动条,不要横滚动条
2011-04-15 23:22 2347如题,就是在网页中,只显示右侧的垂直滚动条,而不要底部的水平滚 ... -
点击按钮保存网页中指定的图片,利用js实现
2011-04-15 00:50 4254有时候在网页上需要禁用右键菜单,但是需要点击某一按钮保存指定的 ... -
js正则验证
2011-03-31 22:47 718引用网址 http://hi.baidu.com/qui ... -
JavaScript相关文章推荐
2011-03-18 00:27 2773判断js数组包是否包含某个元素 要判断数组中是否包含某个元素 ... -
js 数组array的方法介绍
2011-03-18 00:23 796最近用到了Array就对其 ... -
ie的自动完成功能
2011-03-08 00:10 875<!DOCTYPE HTML PUBLIC " ... -
百度代码搜索,谷歌搜索
2011-03-07 23:55 893<!DOCTYPE HTML PUBLIC " ... -
Javascript的调试利器Firebug使用详解
2011-02-25 23:46 796Javascript的调试利器Firebug使用详解.doc -
IE和Firefox浏览器下javascript、CSS兼容性研究
2011-02-25 21:53 841IE和Firefox浏览器下javascript、CSS兼容性 ... -
JS验证日期时间是否合法
2011-02-17 21:00 1912/^(19|20)\d{2}-(0?\d|1[012])-(0 ... -
正则表达式的JS验证
2011-02-17 20:38 752/判断输入内容是否为空 function IsNull ... -
JS函数 验证日期合法(测试通过)
2011-02-17 20:07 1105<script type="text/java ... -
竖向显示,向右弹出的3级层导航菜单特效
2011-02-10 13:08 1413<!DOCTYPE html PUBLIC " ... -
CSS+JS三级滑动菜单
2011-02-10 13:06 1397<html> <head> <t ...
相关推荐
主要介绍了纯html+css制作三级下拉菜单,如何制作下拉菜单效果,三级下拉菜单又是怎么实现的,本文为大家揭晓,感兴趣的小伙伴们可以参考一下
div+css制作的弹出三级菜单,绝对好用。适合二次开发。
CSS 制作的三级菜单特效代码! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
纯DIV+CSS制作的竖向三级导航弹出菜单代码
用HTML5+CSS3制作的动态三级菜单
纯CSS制作的三级下拉导航菜单,根据精美实例改制而成,简单易用
这是一款红色风格的纯CSS3网站导航三级下拉菜单代码,利用css3 transition属性制作的鼠标悬停展开下拉菜单特效,支持二级、三级下拉菜单。
CSS打造符合WEB标准的竖向三级弹出菜单
纯div+css 弹出菜单 水平三级横向弹出菜单
一级下拉列表,二级下拉列表,三级下拉列表。。。网上搜集的资料,并且对不同IE版本有区分,效果还不错哦!
纯css实现水平下拉导航菜单是一款css导航菜单制作下拉三级菜单代码下载。
纯CSS3制作红色下拉导航菜单代码是一款纯css3 transition属性制作红色的导航菜单,鼠标悬停展开下拉菜单,支持三级下拉菜单代码。
纯CSS3制作红色下拉导航菜单代码是一款纯css3 transition属性制作红色的导航菜单,鼠标悬停展开下拉菜单,支持三级下拉菜单代码。
纯CSS实现横向导航栏,导航栏分三级子菜单,主要所用的html标签为ul与li
采用div+css制作的三级联动菜单 完整无错,有需要的就下吧
纯div+css制作三级dropdown弹出菜单 导航菜单
基础掌握知识 1.boder-radis圆角的制作 ...设置一级菜单的宽度、整体居中显示、用border设置颜色为#222的1像素宽的边框、用background-color设置背景颜色为#111、用background-image和linear-grad
2.jQuery+CSS漂亮蓝色三级菜单下载 3.jquery+css实现简洁两级横向导航菜单,带动态效果 4.jQuery+CSS实现竖形动感导航菜单效果 5.jquery+div漂亮SmartMenu下拉菜单气泡透明效果 6.jQuery+div实现flash炫彩...