<!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>dropline-水平三级横向弹出菜单</title>
<style type="text/css">
/* common styling */
.menu {font-family: arial, sans-serif; width:749px; height:30px; position:relative; margin:0; font-size:11px; margin:50px 0; background:#fff; position:relative;}
.menu ul {padding:0; margin:0; list-style-type: none;}
.menu ul li {float:left; border-left:1px solid #eee; width:106px;}
.menu ul li a, .menu ul li a:visited {display:block; float:left; width:101px; text-decoration:none; padding:0 0 0 5px; height:30px; line-height:30px; color:#000; background:#c9c9a7 url(../../graphics/drop.gif) bottom right no-repeat;}
.menu ul li ul {display: none;}
/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#b3ab79;}
.menu ul li:hover ul {display:block; position:absolute; width:749px; top:30px; left:0; background:#b3ab79; color:#fff;}
.menu ul li:hover ul.right_side li {float:right; border:0; border-left:1px solid #eee;}
.menu ul li:hover ul.left_side li {float:left; border:0; border-left:1px solid #eee;}
.menu ul li:hover ul li a.hide {background:#bd8d5e url(../../graphics/drop2.gif) bottom right no-repeat; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#b3ab79; color:#fff;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:##b3ab79; color:#fff;}
.menu ul li:hover ul li a:hover {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:0; top:30px; color:#000; background:#dfc184;}
.menu ul li:hover ul.right li {float:right;}
.menu ul li:hover ul li:hover a.hide {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul li a {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul li a:hover {background:#bd8d5e; color:#fff;}
</style>
<!--[if lte IE 6]>
<style type="text/css">
table {border-collapse:collapse; margin:0; padding:0;}
.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}
.menu ul li a, .menu ul li a:visited {background:#c9c9a7 url(../../graphics/drop.gif) 20px right no-repeat;}
.menu ul li a:hover {color:#fff; background:#b3ab79;}
.menu ul li a:hover ul {display:block; position:absolute; width:749px; top:30px; left:0; background:#b3ab79; color:#fff;}
.menu ul li a:hover ul.right_side li {float:right; border-width:0 1px 0 0 0;}
.menu ul li a:hover ul.left_side li {float:left;}
.menu ul li a:hover ul li a.sub {background:#bd8d5e url(../../graphics/drop2.gif) 20px right no-repeat; color:#fff;}
.menu ul li a:hover ul li a {display:block; background:#b3ab79; color:#fff;}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {background:#dfc184; color:#000;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:0; top:30px; color:#000; background:#dfc184;}
.menu ul li a:hover ul li a:hover ul li a {background:#dfc184; color:#000;}
.menu ul li a:hover ul li a:hover ul li a:hover {background:#bd8d5e; color:#fff;}
</style>
<![endif]-->
</head>
<body>
<div class="menu">
<ul>
<li><a class="hide" href="../menu/index.html">DEMOS</a>
<!--[if lte IE 6]>
<a href="../menu/index.html">DEMOS
<table><tr><td>
<![endif]-->
<ul>
<li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
<li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li>
<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
<li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK</a>
<!--[if lte IE 6]>
<a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK
<table><tr><td>
<![endif]-->
<ul class="right_side">
<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
<li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
<li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="index.html">MENUS</a>
<!--[if lte IE 6]>
<a href="index.html">MENUS
<table><tr><td>
<![endif]-->
<ul>
<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
<li><a href="circles.html" title="circular links">circular links</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="../layouts/index.html">LAYOUTS</a>
<!--[if lte IE 6]>
<a href="../layouts/index.html">LAYOUTS
<table><tr><td>
<![endif]-->
<ul>
<li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li>
<li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li>
<li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li>
<li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li>
<li><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="../boxes/index.html">BOXES</a>
<!--[if lte IE 6]>
<a href="../boxes/index.html">BOXES
<table><tr><td>
<![endif]-->
<ul>
<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
<li><a href="circles.html" title="circular links">circular links</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="../mozilla/index.html">MOZILLA</a>
<!--[if lte IE 6]>
<a href="../mozilla/index.html">MOZILLA
<table><tr><td>
<![endif]-->
<ul>
<li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li>
<li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>
<li><a href="../mozilla/content.html" title="Using content:">content:</a></li>
<li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li>
<li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li>
<li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li>
<li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="../ie/index.html">EXPLORER</a>
<!--[if lte IE 6]>
<a href="../ie/index.html">EXPLORER
<table><tr><td>
<![endif]-->
<ul class="right_side">
<li><a href="../ie/exampleone.html" title="Example one">example one</a></li>
<li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li>
<li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="../opacity/index.html">OPACITY</a>
<!--[if lte IE 6]>
<a href="../opacity/index.html">OPACITY
<table><tr><td>
<![endif]-->
<ul class="right_side">
<li><a href="../opacity/colours.html" title="colour wheel">opaque colours</a></li>
<li><a href="../opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li>
<li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li>
<li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li>
<li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK</a>
<!--[if lte IE 6]>
<a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK
<table><tr><td>
<![endif]-->
<ul class="left_side">
<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
<li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
</ul>
</div>
</body>
</html>
分享到:
相关推荐
22款css Menu CSS滑动门菜单效果下载 预览地址: 第一批(文件包1文件夹下):http://www.sky54.net/cssmenu/1/<br><br>第二批(文件包2文件夹下):http://www.sky54.net/cssmenu/2/<br><br><br>
qq 下拉菜单 CSS css menuqq 下拉菜单 CSS css menuqq 下拉菜单 CSS css menuqq 下拉菜单 CSS css menuqq 下拉菜单 CSS css menuqq 下拉菜单 CSS css menuqq 下拉菜单 CSS css menu
**CSS3**(层叠样式表第三版)是Web样式语言,它扩展了CSS2的功能,引入了许多新的特性,如动画、阴影效果、圆角边框、多列布局等,使得网页设计更加灵活且富有表现力。在CSS3Menu中,这些特性被充分利用,以创建出...
CSS3Menu 能帮助你十分简单并且省事的创建一个导航栏菜单,你只需点几下鼠标,选几种颜色,完事。如果利用内置的模板那就更容易了,只需输入菜单上的文字即可。 如果你在设计导航条的时候,导航条的文字里面包含中文...
"css menu sample"这个项目提供了一个关于如何使用CSS构建菜单的实例,特别是涉及了Mallonic的解决方案,它可能包含了针对不同浏览器的兼容性调整,即所谓的“hack”技巧。 Mallonic是一个知名的前端开发资源库,...
这个“css_menu.rar”压缩包显然包含了关于如何创建一个CSS驱动的垂直多级菜单的相关资源。下面,我们将深入探讨这个主题,以及如何通过CSS实现这样的效果。 首先,我们要理解CSS垂直菜单的基本结构。通常,这种...
CSS3Menu 能帮助你十分简单并且省事的创建一个导航栏菜单,你只需点几下鼠标,选几种颜色,完事。如果利用内置的模板那就更容易了,只需输入菜单上的文字即可。比较遗憾的是在 试用过程中,CSS3Menu 的导出功能貌似...
"JS+CSS Menu"是一个结合了JavaScript(JS)和层叠样式表(CSS)技术的菜单解决方案,旨在创建交互式、动态且具有吸引力的网页菜单。这种菜单设计方法充分利用了两种语言的优势,提供更丰富的用户体验。 JavaScript...
本主题“css_Menu_css样式”着重关注如何利用CSS来创建功能性和美观的下拉菜单。下拉菜单是网站导航系统中的常见组件,为用户提供了一种方便的方式来访问多个层次的链接。 一、CSS基础 CSS通过选择器和声明来操作...
CSS Menu Generator 4.0.
本资源"CSS_Menu.rar"是一个压缩包,包含了创建商业风格CSS垂直菜单所需的所有文件,用户可以下载并根据自己的需求进行修改,以适应自己的网站设计。 首先,我们来了解一下CSS垂直菜单的基本构成。一个典型的CSS...
本文将深入探讨标题"国外流行的58个基本css menu素材"所涉及的知识点,以及如何利用这些素材提升网站设计。 首先,CSS菜单的核心在于其样式控制能力,它允许设计师通过定义不同样式来改变菜单的布局、颜色、字体、...
**CSS Menu Generator v4.0汉化绿色版详解** 在网页设计中,创建美观且功能强大的导航菜单是一项关键任务,因为它直接影响着用户的交互体验。CSS Menu Generator v4.0是这样一款工具,专为帮助设计师和开发者快速、...
CSS3 Menu菜单编辑器,可自动方面的设置自定义个性的导航菜单栏
"css-dock-menu" 是一个利用CSS技术创建的仿Flash效果的菜单,它以其美观、动态的特性吸引用户的注意力,提升了网站的交互体验。在网页设计中,这种菜单可以增强用户界面的可用性和吸引力。 "cool css menu" 标签...
"good_menu.rar" 提供了一个基于 HTML 和 CSS 的下拉菜单示例,让我们来深入了解一下这个主题。 首先,HTML(HyperText Markup Language)是网页内容的基础结构语言,而 CSS(Cascading Style Sheets)则负责网页的...
本文将详细讲解如何使用C#语言,结合数据库和CSS样式,实现.NET Menu控件的动态绑定。 首先,理解Menu控件的基本概念。Menu控件是一个用于构建多级导航结构的控件,它可以自动生成HTML代码,如和元素,以呈现层次化...
本主题“css_menu.zip_CSS ME_css”关注的是如何利用纯CSS创建一个下拉菜单,这在网页交互设计中是常见的需求,特别是对于导航栏的设计。这个压缩包包含了一个名为“css_menu”的示例,旨在展示如何用简单的CSS代码...
Lavalamp Menu是一种很好的效果,早期在国外的博客中看到过这种效果,是通过jquery插件制作的,一开始还不知道这种效果就叫Lavalamp呢?现在我使用CSS3写了一个水平的Lavalamp的导航效果,这个效果其实很简单,主要...
二级树形菜单示例:CSS TreeMenu