`
literary_fly
  • 浏览: 92543 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

CSS 制作的三级菜单

CSS网页游戏游戏Flash音乐 
阅读更多
<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
分享到：
| 竖向显示，向右弹出的3级层导航菜单特效
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    纯html+css制作三级下拉菜单

    接下来，对于三级菜单，原理与二级菜单相同，但嵌套更深。在一级菜单项的子`&lt;ul&gt;`中，再嵌套一层`&lt;ul&gt;`来创建三级菜单。当鼠标悬停在二级菜单项上时，三级菜单会出现。这同样通过CSS的`:hover`选择器和`display`属性...

    div+css制作的弹出三级菜单

    本话题将重点讨论如何利用`div+css`技术制作一个实用的弹出式三级菜单，这个菜单适用于网站导航，方便用户快速访问深层次的页面内容，并且易于进行二次开发。 首先，`div`元素是HTML中的一个通用容器，可以容纳其他...

    html模版三级菜单

    在这个"html模版三级菜单"中，我们主要关注的是如何在HTML中实现一个具有三层导航菜单的功能，这通常涉及到HTML、CSS以及可能的JavaScript技术。 首先，HTML（HyperText Markup Language）是网页内容的结构化语言，...

    纯DIV+CSS制作的竖向三级弹出菜单代码

    标题与描述中提到的“纯DIV+CSS制作的竖向三级导航弹出菜单代码”是指在网页设计中，不借助JavaScript等脚本语言，仅通过HTML的`div`元素和CSS样式表来实现一个具有竖向布局、三级层次结构且支持鼠标悬停时自动弹出...

    div+css 三级导航

    制作三级导航菜单时，我们通常会使用嵌套的 `div` 元素来表示各个层级的关系。一级导航通常包含顶部的主要菜单项，二级导航在鼠标悬停一级菜单时出现，而三级导航则在二级菜单被选中时显示。通过设置 `display` 属性...

    CSS3动态三级菜单_css_

    随着CSS3的出现，设计师们拥有了更多创新和交互性的工具，其中就包括制作动态三级菜单。这个项目“CSS3动态三级菜单”利用了HTML5和CSS3的特性，创建了一个具有视觉吸引力且响应式的菜单系统，适用于现代网页应用。 ...

    CSS 制作的三级菜单特效代码

    CSS 制作的三级菜单特效代码! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/

    网页三级菜单制作（转载）

    网页制作中的菜单设计是用户体验的重要组成部分，特别是在复杂的网站结构中，三级菜单的运用能有效组织信息，方便用户快速导航。本教程将分享一种基于jQuery的横向滑动三级下拉菜单的实现方法，它具有良好的视觉效果...

    网页三级菜单的制作

    以上就是制作网页三级下拉菜单的基本步骤，通过HTML、CSS和JavaScript的组合应用，可以实现功能丰富且用户体验良好的三级菜单。在实际项目中，你可能需要根据具体需求进行调整和优化，比如添加自定义图标、添加动画...

    超强的三级菜单制作法

    总结，制作超强的三级菜单需要综合运用HTML、CSS和JavaScript等技术，并注重用户体验和可访问性。通过不断实践和优化，我们可以创建出既美观又实用的菜单系统，提升用户的使用体验。而“超强的三级菜单制作法.xls”...

    jquery多级导航菜单hover事件制作三级导航菜单代码

    接下来，我们使用jQuery来完善hover事件的功能，确保在鼠标离开一级菜单时，二级和三级菜单能够正确地延迟关闭，以防止快速移动鼠标时的闪烁现象。可以使用`setTimeout`和`clearTimeout`实现这一效果。 ```...

    纯div+css制作的弹出菜单

    &lt;li&gt;&lt;a href="#"&gt;三级菜单1.2.1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;三级菜单1.2.2&lt;/a&gt;&lt;/li&gt; &lt;!-- 其他一级菜单项 --&gt; ``` 接着，我们需要用CSS来定义菜单的样式。这里的关键是使用相对定位（relative）和绝对...

    页面菜单制作（一二三级横纵向上弹下拉、左右）

    2. **二级和三级菜单**：当用户点击一级菜单项时，可以出现二级或三级菜单，提供更具体的功能选项。这些子菜单可以通过悬停或点击触发，展示更多的导航路径。 3. **横纵切换**：在菜单设计中，横纵切换是指子菜单...

    CSS二级菜单

    在网页设计中，CSS（Cascading Style Sheets）是一种用于定义HTML或XML（包括SVG、XHTML等）文档中元素样式的样式...总之，CSS二级菜单是网页设计中一个重要的组成部分，熟练掌握其制作技巧对于提升用户体验至关重要。

    jquery产生的三级菜单

    jQuery 是一个广泛使用的 JavaScript 库，提供了丰富的功能和简洁的 API，使得创建动态、交互式的网页元素变得更加简单，包括制作三级菜单。本篇文章将深入探讨如何使用 jQuery 创建高效的三级菜单，以及相关知识点...

    CSS打造符合WEB标准的竖向三级弹出菜单

    CSS打造符合WEB标准的竖向三级弹出菜单

    静态网页，原生代码制作，有三级下拉菜单

    &lt;li&gt;&lt;a href="#"&gt;三级菜单1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;三级菜单2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;二级菜单2&lt;/a&gt;&lt;/li&gt; ``` 二、CSS美化 CSS（层叠样式表）用于控制网页的外观。为实现下拉菜单的效果，我们...

    向上三级菜单

    总的来说，"向上三级菜单"的实现涉及HTML结构、CSS样式以及jQuery脚本的编写。通过合理的设计和优化，我们可以创建一个高效、易用且美观的导航菜单，提升网站的整体用户体验。在实际项目中，开发者可以根据需求进行...

Magicbox
Global site tag (gtag.js) - Google Analytics