<!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>二级dropdown弹出菜单--A CROSS BROWSER DROP DOWN CASCADING VALIDATING MENU</title>
<style type="text/css">
/* common styling */
/* set up the overall width of the menu div, the font and the margins */
.menu {
font-family: arial, sans-serif;
width:750px;
margin:0;
margin:50px 0;
}
/* remove the bullets and set the margin and padding to zero for the unordered list */
.menu ul {
padding:0;
margin:0;
list-style-type: none;
}
/* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */
.menu ul li {
float:left;
position:relative;
}
/* style the links to be 104px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */
.menu ul li a, .menu ul li a:visited {
display:block;
text-align:center;
text-decoration:none;
width:104px;
height:30px;
color:#000;
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#c9c9a7;
line-height:30px;
font-size:11px;
}
/* make the dropdown ul invisible */
.menu ul li ul {
display: none;
}
/* specific to non IE browsers */
/* set the background and foreground color of the main menu li on hover */
.menu ul li:hover a {
color:#fff;
background:#b3ab79;
}
/* make the sub menu ul visible and position it beneath the main menu list item */
.menu ul li:hover ul {
display:block;
position:absolute;
top:31px;
left:0;
width:105px;
}
/* style the background and foreground color of the submenu links */
.menu ul li:hover ul li a {
display:block;
background:#faeec7;
color:#000;
}
/* style the background and forground colors of the links on hover */
.menu ul li:hover ul li a:hover {
background:#dfc184;
color:#000;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
/* styling specific to Internet Explorer IE5.5 and IE6. Yet to see if IE7 handles li:hover */
/* Get rid of any default table style */
table {
border-collapse:collapse;
margin:0;
padding:0;
}
/* ignore the link used by 'other browsers' */
.menu ul li a.hide, .menu ul li a:visited.hide {
display:none;
}
/* set the background and foreground color of the main menu link on hover */
.menu ul li a:hover {
color:#fff;
background:#b3ab79;
}
/* make the sub menu ul visible and position it beneath the main menu list item */
.menu ul li a:hover ul {
display:block;
position:absolute;
top:32px;
left:0;
width:105px;
}
/* style the background and foreground color of the submenu links */
.menu ul li a:hover ul li a {
background:#faeec7;
color:#000;
}
/* style the background and forground colors of the links on hover */
.menu ul li a:hover ul li a:hover {
background:#dfc184;
color:#000;
}
</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 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>
<li><a href="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li>
<li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>
<li><a href="../menu/em_images.html" title="em size images compared">em sized images</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>
<li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li>
<li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</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>
<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>
<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>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
</ul>
<!-- clear the floats if required -->
<div class="clear"> </div>
</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>
"css menu sample"这个项目提供了一个关于如何使用CSS构建菜单的实例，特别是涉及了Mallonic的解决方案，它可能包含了针对不同浏览器的兼容性调整，即所谓的“hack”技巧。 Mallonic是一个知名的前端开发资源库，...
"JS+CSS Menu"是一个结合了JavaScript（JS）和层叠样式表（CSS）技术的菜单解决方案，旨在创建交互式、动态且具有吸引力的网页菜单。这种菜单设计方法充分利用了两种语言的优势，提供更丰富的用户体验。 JavaScript...
qq 下拉菜单 CSS css menuqq 下拉菜单 CSS css menuqq 下拉菜单 CSS css menuqq 下拉菜单 CSS css menuqq 下拉菜单 CSS css menuqq 下拉菜单 CSS css menuqq 下拉菜单 CSS css menu
本文将深入探讨标题"国外流行的58个基本css menu素材"所涉及的知识点，以及如何利用这些素材提升网站设计。 首先，CSS菜单的核心在于其样式控制能力，它允许设计师通过定义不同样式来改变菜单的布局、颜色、字体、...
**CSS Menu Generator v4.0汉化绿色版详解** 在网页设计中，创建美观且功能强大的导航菜单是一项关键任务，因为它直接影响着用户的交互体验。CSS Menu Generator v4.0是这样一款工具，专为帮助设计师和开发者快速、...
CSS Menu Generator 4.0.
标题中的“23个符合web2.0标准的div_css menu.rar”暗示了这是一个包含23种设计样式的Web2.0风格的CSS菜单资源包。Web2.0是互联网发展的一个阶段，强调用户交互、社交网络和富互联网应用程序（RIA）。在网页设计中，...
这个“css_menu.rar”压缩包显然包含了关于如何创建一个CSS驱动的垂直多级菜单的相关资源。下面，我们将深入探讨这个主题，以及如何通过CSS实现这样的效果。 首先，我们要理解CSS垂直菜单的基本结构。通常，这种...
本资源"CSS_Menu.rar"是一个压缩包，包含了创建商业风格CSS垂直菜单所需的所有文件，用户可以下载并根据自己的需求进行修改，以适应自己的网站设计。 首先，我们来了解一下CSS垂直菜单的基本构成。一个典型的CSS...
CSS Menu Generator 个人建站 实例借鉴
"good_menu.rar" 提供了一个基于 HTML 和 CSS 的下拉菜单示例，让我们来深入了解一下这个主题。 首先，HTML（HyperText Markup Language）是网页内容的基础结构语言，而 CSS（Cascading Style Sheets）则负责网页的...
"css-dock-menu" 是一个利用CSS技术创建的仿Flash效果的菜单，它以其美观、动态的特性吸引用户的注意力，提升了网站的交互体验。在网页设计中，这种菜单可以增强用户界面的可用性和吸引力。 "cool css menu" 标签...
Pure css implemented menu, add .html subfix.
标题"Pure CSS Menu Maker Setup"指的是一个用于创建纯CSS（Cascading Style Sheets）菜单的软件安装程序。这个工具简化了网页设计过程中菜单制作的复杂性，尤其对于那些不熟悉CSS编码的用户来说，它提供了极大的...
在Web2.0环境中，网页设计与开发有了显著的进步，其中Div+CSS成为了构建现代网页布局的主要技术。Div（Division）是HTML中的一个块级元素，用于组织和分隔页面内容，而CSS（Cascading Style Sheets）则负责样式控制...
CSS3Menu 能帮助你十分简单并且省事的创建一个导航栏菜单，你只需点几下鼠标，选几种颜色，完事。如果利用内置的模板那就更容易了，只需输入菜单上的文字即可。 如果你在设计导航条的时候，导航条的文字里面包含中文...
**CSS3Menu v3.5.zip** 是一个用于创建网页导航菜单的工具，它利用了CSS3技术，为网页设计者提供了便捷的方式去构建高效、美观的导航栏。这款工具的特点在于其简单易用，用户无需深入理解HTML和CSS3的复杂语法，只需...
在这个主题中，我们将深入探讨如何使用CSS3的`::before`和`::after`伪元素来创建一个搜索图标。 首先，让我们理解一下`::before`和`::after`伪元素的概念。这两个伪元素允许我们在HTML元素的内容前面或后面插入内容...
本文将深入探讨如何使用CSS创建多种Menu样式，并结合实例解析`cssmenu`的实现。 1. **基础概念** - CSS（层叠样式表）：是一种样式表语言，用于定义HTML或XML（包括如SVG、MathML等各种XML方言）文档的呈现。 - ...