三个CSS实现的下拉菜单
ONE....................................
HTML 代码:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title> Drop Down Menu </title>
<style type="text/css">
body {font-size:1%; color:#fff;} /*get rid of the IE bug that prints the the end of the !doctype */
.menu {display:none;}
.holder {color:#000; width:90px; height:18px; display:block; background:#dca; border:1px solid #000; margin-right:1px; text-align:center; float:left; text-decoration:none; font-family:tahoma, vardana, arial, sans-serif; font-size:10px; line-height:18px; overflow:hidden;}
.holder:hover {height:auto; cursor:pointer;color:#fff; background:#000;}
a.inner, a.inner:visited {display:block; width:89px; height:18px; border-bottom:1px solid #000; text-decoration:none; color:#000; background:#eee;}
a.inner:hover {background:#add;}
p { color:#000; font-size:16px;}
</style>
<!--[if IE]>
<style type="text/css">
/*<![CDATA[*/
.holder {display:none;}
.menu {display:block;}
a.outer, a.outer:visited {color:#000; width:90px; height:18px; display:block; background:#dca; border:1px solid #000; margin-right:1px; text-align:center; float:left; text-decoration:none; font-family:tahoma, vardana, arial, sans-serif; font-size:10px; line-height:18px; overflow:hidden;}
a.outer:hover {color:#fff; background:#000; overflow:visible;}
a.outer:hover table {display:block; background:#eee; border-collapse:collapse;}
a.inner, a.inner:visited {display:block; width:88px; height:18px; border-bottom:1px solid #000; text-decoration:none; color:#000;font-family:tahoma, vardana, arial, sans-serif; font-size:10px; text-align:center;}
a.inner:hover {background:#add;}
/*]]>*/
</style>
<![endif]-->
</head>
<body>
<p>For another demo with page content see <a href="http://www.stunicholls.myby.co.uk/menus/drop_down.html" title="another demo">this page</a>
<div class="menu">
<a class="outer" href="page1.html">MENU 1
<table><tr><td>
<a class="inner" href="page1a.html">Page 1a</a>
<a class="inner" href="page1b.html">Page 1b</a>
<a class="inner" href="page1c.html">Page 1c</a>
<a class="inner" href="page1d.html">Page 1d</a>
<a class="inner" href="page1e.html">Page 1e</a>
</td></tr></table>
</a>
<a class="outer" href="page1.html">MENU 2
<table><tr><td>
<a class="inner" href="page2a.html">Page 2a</a>
<a class="inner" href="page2b.html">Page 2b</a>
<a class="inner" href="page2c.html">Page 2c</a>
<a class="inner" href="page2d.html">Page 2d</a>
</td></tr></table>
</a>
</div>
<div class="holder">
MENU 1<br />
<a class="inner" href="page1a.html">Page 1a</a>
<a class="inner" href="page1b.html">Page 1b</a>
<a class="inner" href="page1c.html">Page 1c</a>
<a class="inner" href="page1d.html">Page 1d</a>
<a class="inner" href="page1e.html">Page 1e</a>
</div>
<div class="holder">
MENU 2<br />
<a class="inner" href="page2a.html">Page 2a</a>
<a class="inner" href="page2b.html">Page 2b</a>
<a class="inner" href="page2c.html">Page 2c</a>
<a class="inner" href="page2d.html">Page 2d</a>
</div>
</body>
</html>
TWO....................................
HTML 代码:
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css菜单演示</title>
<style type="text/css">
<!--
*{margin:0;padding:0;border:0;}
body {
font-family: arial, 宋体, serif;
font-size:12px;
}
#nav {
line-height: 24px; list-style-type: none; background:#666;
}
#nav a {
display: block; width: 80px; text-align:center;
}
#nav a:link {
color:#666; text-decoration:none;
}
#nav a:visited {
color:#666;text-decoration:none;
}
#nav a:hover {
color:#FFF;text-decoration:none;font-weight:bold;
}
#nav li {
float: left; width: 80px; background:#CCC;
}
#nav li a:hover{
background:#999;
}
#nav li ul {
line-height: 27px; list-style-type: none;text-align:left;
left: -999em; width: 180px; position: absolute;
}
#nav li ul li{
float: left; width: 180px;
background: #F6F6F6;
}
#nav li ul a{
display: block; width: 156px;text-align:left;padding-left:24px;
}
#nav li ul a:link {
color:#666; text-decoration:none;
}
#nav li ul a:visited {
color:#666;text-decoration:none;
}
#nav li ul a:hover {
color:#F3F3F3;text-decoration:none;font-weight:normal;
background:#C00;
}
#nav li:hover ul {
left: auto;
}
#nav li.sfhover ul {
left: auto;
}
#content {
clear: left;
}
-->
</style>
<script type=text/javascript><!--//--><![CDATA[//><!--
function menuFix() {
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseDown=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseUp=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),
"");
}
}
}
window.onload=menuFix;
//--><!]]></script>
</head>
<body>
<ul id="nav">
<li><a href="#">产品介绍</a>
<ul>
<li><a href="#">产品一</a></li>
<li><a href="#">产品一</a></li>
<li><a href="#">产品一</a></li>
<li><a href="#">产品一</a></li>
<li><a href="#">产品一</a></li>
<li><a href="#">产品一</a></li>
</ul>
</li>
<li><a href="#">服务介绍</a>
<ul>
<li><a href="#">服务二</a></li>
<li><a href="#">服务二</a></li>
<li><a href="#">服务二</a></li>
<li><a href="#">服务二服务二</a></li>
<li><a href="#">服务二服务二服务二</a></li>
<li><a href="#">服务二</a></li>
</ul>
</li>
<li><a href="#">成功案例</a>
<ul>
<li><a href="#">案例三</a></li>
<li><a href="#">案例</a></li>
<li><a href="#">案例三案例三</a></li>
<li><a href="#">案例三案例三案例三</a></li>
</ul>
</li>
<li><a href="#">关于我们</a>
<ul>
<li><a href="#">我们四</a></li>
<li><a href="#">我们四</a></li>
<li><a href="#">我们四</a></li>
<li><a href="#">我们四111</a></li>
</ul>
</li>
<li><a href="#">在线演示</a>
<ul>
<li><a href="#">演示</a></li>
<li><a href="#">演示</a></li>
<li><a href="#">演示</a></li>
<li><a href="#">演示演示演示</a></li>
<li><a href="#">演示演示演示</a></li>
<li><a href="#">演示演示</a></li>
<li><a href="#">演示演示演示</a></li>
<li><a href="#">演示演示演示演示演示</a></li>
</ul>
</li>
<li><a href="#">联系我们</a>
<ul>
<li><a href="#">联系联系联系联系联系</a></li>
<li><a href="#">联系联系联系</a></li>
<li><a href="#">联系</a></li>
<li><a href="#">联系联系</a></li>
<li><a href="#">联系联系</a></li>
<li><a href="#">联系联系联系</a></li>
<li><a href="#">联系联系联系</a></li>
</ul>
</li>
</ul>
</body>
</html>
Three.....................
HTML 代码:
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-CN" />
<title>横向下拉菜单</title>
<style type="text/css">
<!--
* {margin:0;padding:0;border:0;}
body {
font-family: arial, 宋体, serif;
font-size:12px;
}
#nav {
height: 24px; list-style-type: none; padding-left:200px;
line-height:24px;overflow:hidden;background:#999;
}
#nav a {
display: block; width: 80px; text-align:center;
}
#nav a:link {
color:#EEE; text-decoration:none;
}
#nav a:visited {
color:#EEE;text-decoration:none;
}
#nav a:hover {
color:#FFF;text-decoration:none;font-weight:bold;background:#CCC;
}
#nav li {
float: left; width: 80px;
}
#nav li ul {
line-height: 24px;
list-style-type: none;
text-align:left;
left: -999px;
width: 520px; //注意,这里一定要设置宽度;
position: absolute;
background:#CCC;
}
#nav li ul li{
float: left;width: 80px; //float就是子菜单横向的关键,可以继承父菜单而省略float
}
#nav li ul a{
display: block; width: 65px;text-align:left;padding-left:15px;
}
#nav li ul a:link {
color:#F1F1F1; text-decoration:none;
}
#nav li ul a:visited {
color:#F1F1F1;text-decoration:none;
}
#nav li ul a:hover {
color:#FFF;text-decoration:none;font-weight:normal;background:#C00;
}
#nav li:hover ul {
left:25%;
}
#nav li.sfhover ul {
left:25%;
}
#content {
clear: left;
}
-->
</style>
<script type=text/javascript><!--//--><![CDATA[//><!--
function menuFix() {
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseDown=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseUp=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),
"");
}
}
}
window.onload=menuFix;
//--><!]]></script>
</head>
<body>
<ul id="nav">
<li><a href="#">菜单一</a>
<ul>
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单一</a></li>
</ul>
</li>
<li><a href="#">菜单二</a>
<ul>
<li><a href="#">菜单二</a></li>
<li><a href="#">菜单二</a></li>
<li><a href="#">菜单二</a></li>
<li><a href="#">菜单二</a></li>
<li><a href="#">菜单二</a></li>
</ul>
</li>
<li><a href="#">菜单三</a>
<ul>
<li><a href="#">菜单三</a></li>
<li><a href="#">菜单三</a></li>
<li><a href="#">菜单三</a></li>
<li><a href="#">菜单三</a></li>
<li><a href="#">菜单三</a></li>
</ul>
</li>
<li><a href="#">菜单四</a>
<ul>
<li><a href="#">菜单四</a></li>
<li><a href="#">菜单四</a></li>
<li><a href="#">菜单四</a></li>
<li><a href="#">菜单四</a></li>
<li><a href="#">菜单四</a></li>
</ul>
</li>
<li><a href="#">菜单五</a>
<ul>
<li><a href="#">菜单五</a></li>
<li><a href="#">菜单五</a></li>
<li><a href="#">菜单五</a></li>
<li><a href="#">菜单五</a></li>
<li><a href="#">菜单五</a></li>
</ul>
</li>
<li><a href="#">菜单六</a>
<ul>
<li><a href="#">菜单六</a></li>
<li><a href="#">菜单六</a></li>
<li><a href="#">菜单六</a></li>
<li><a href="#">菜单六</a></li>
<li><a href="#">菜单六</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html> <!-- 页脚 -->
分享到：
相关推荐
这个css3下拉菜单插件的核心优势在于其多样的效果。可能包含但不限于渐变背景、过渡动画、悬停效果、多级展开等，这些效果可以通过修改插件的CSS样式或者配置参数来实现。例如，你可以选择平滑的滑动效果，或者炫酷...
在网页设计中，CSS3（层叠样式表第三版）为开发者带来了许多强大的新特性，其中之一就是创建交互式、动态的下拉菜单。下拉菜单是网页导航元素中常见的一种，它能有效地组织大量链接，提供简洁的用户体验。在CSS3之前...
本文将深入探讨如何使用纯HTML和CSS来创建一个三级下拉菜单。 首先，HTML是基础结构，用于定义菜单的层次结构。在提供的代码中，可以看到一个`<ul>`元素作为主菜单容器，其内部的`<li>`元素代表一级菜单项。每个一...
2. **过渡效果**：通过`transition`属性，我们可以平滑地改变一个或多个CSS属性值，如高度、透明度等，从而实现下拉菜单的动画效果。 3. **Flexbox布局**：使用`display: flex`和相关属性（如`justify-content`、`...
这款下拉菜单就是利用了CSS3的新特性来实现其简洁而美观的效果。 首先，CSS3下拉菜单的核心在于其布局和选择器的使用。通常，菜单项会通过`display`属性设置为`inline-block`或`flex`，以便在一行内水平排列。当...
以上就是一个基本的CSS下拉菜单实现。当然，还有许多高级技巧和特效，比如过渡效果、动画、多级下拉等，可以通过学习和实践进一步完善。记住，良好的可访问性和用户体验也是创建下拉菜单时应考虑的重要因素。
本案例聚焦于使用CSS实现下拉菜单，这在网页交互设计中是常见且实用的功能...通过这个实训案例，学生不仅能掌握CSS下拉菜单的制作，还能深入理解CSS布局、选择器和交互效果的实现，为未来复杂的网页设计打下坚实基础。
在本资源包“下拉菜单集合”中，包含了多种类型的下拉菜单，包括二级和三级下拉菜单，这些设计通常用于导航栏、设置选项或用户界面的其他部分，以节省屏幕空间并提升用户体验。 一、下拉菜单的基本结构与原理 下拉...
这通常包括一个`<ul>`元素作为主菜单容器，其中包含多个`<li>`元素表示各个菜单项，每个`<li>`元素内部再包含一个子`<ul>`表示下拉菜单内容。 ```html <li><a href="#">菜单1 <li><a href="#">子菜单1-1</a></...
2. **过渡（Transition）**：通过指定两个状态之间的变化速度，可以平滑地改变一个或多个CSS属性。在滑动下拉菜单中，过渡效果可以应用于高度、透明度等属性，使菜单展开和收起过程更加流畅。 3. **变换（Transform...
在提供的压缩包中，有三个CSS文件：styles.css、nav-h.css和nav-v.css。`styles.css`通常包含全局样式，而`nav-h.css`和`nav-v.css`可能专门用于水平和垂直导航菜单的样式定义。 1. `styles.css`: 这个文件可能包含...
总之，黑色css3导航栏下拉菜单动画特效是通过CSS3的特性实现的，包括选择器、伪类、过渡、布局和动画。掌握这些技能不仅可以提升网站的用户体验，也是网页设计师必备的专业素养。通过实践和学习，你可以创建出更多...
在这个主题中，我们讨论的是一种无需JavaScript（JS）就能实现的3级下拉菜单，完全依赖于CSS3的技术。这个方法不仅简化了代码，还确保了在支持CSS3的浏览器中的良好性能。 CSS3引入了许多新的选择器、属性和过渡...
在网页设计领域，`DIV+CSS`是一种常见的布局方式，它通过HTML的`<div>`元素...这个资源提供的5个个性下拉菜单实例，为开发者提供了一个很好的学习和参考平台，帮助他们进一步理解和实践`DIV+CSS`下拉菜单的设计与实现。
在这个主题中，“25个免费的HTML5 CSS3 jQuery下拉菜单”是一个集合，它包含了多种使用这些技术实现的下拉菜单模板，供开发者在构建网站时选用。 HTML5作为最新的超文本标记语言标准，提供了更强大的语义化元素，如...
在创建下拉导航菜单时，CSS可以用来定义菜单项的布局、颜色、字体、悬停效果以及下拉菜单的显示和隐藏。这个代码下载提供了实现这一功能的具体示例，通过简单的HTML结构和精心设计的CSS规则，可以构建出具有三级下拉...
本教程将详细探讨如何利用CSS3实现一个蓝色宽屏的二级下拉菜单，提升网站导航的用户体验。 首先，二级下拉菜单是网页导航栏中的常见元素，它允许用户在主菜单项下进一步探索子分类。这种结构有助于组织大量链接，使...
本文将详细探讨三种实现网页下拉菜单的方法：HTML+CSS、JavaScript（原生JS）以及jQuery。 首先，HTML+CSS实现的下拉菜单主要依赖于HTML的`<ul>`和`<li>`标签，以及CSS的伪类和布局属性。创建一个基础的下拉菜单...
在“五款漂亮的CSS横向下拉菜单导航条”中，可能包含了各种设计风格和实现方法，如纯CSS实现、JavaScript辅助、过渡效果的应用等。这些实例提供了实际操作的经验，可以帮助开发者学习和借鉴。 总结，创建漂亮的CSS...