之前由于没有用到下拉菜单，一直没去实践（只在刚学建站时用DW做了一个，无代码亲自操作经历），今天终于抽出时间做了一个下拉菜单，IE6、IE7、/FF下通用不变形，其实这个很基础，但对于往标准化转变有很好的促进作用。
先把关键点和思路摘录一下：
1、结构布局：
在菜单版块上，下拉的菜单也是放在UL中，但必需要嵌套在其父级的LI中，如下
<div id=”nav”>
<ul id=”nav_top”>
<li id=”nav_index”><a href=”/”>首页</a></li>
<li><a href=”#”>CSS专栏</a>
<ul>
<li><a href=”#”>CSS基础</a></li>
<li><a href=”#”>CSS常用代码</a></li>
<li><a href=”#”>CSS高级技术</a></li>
</ul>
</li>
… …
</div>
在这样的结构中，上层的DIV等标签不能用overflow:hidden; ，否则下拉菜单会出不来。我清晰的记得，刚学DW建站的第一个月，就用DW做了一个下拉菜单，但现在回去去看，那个更多依靠是的JS，有时定位不准会产生下拉菜单跑位。
而这样嵌套后，一会通过定位，就不会偏移。在实际应用时，nav可以加入LOGO等内容，而nav_top才是用于控制菜单。
2、样式继承：
由于在CSS中的组合选择符，会对其下的同样子标签会赋予同样的样式特征，因此，当我们对第一层的UL和LI定义时，下拉部分也会被带上同样的样式，先不管这个，最后再去修正下拉部分的UL和LI。
A、第一层样式定义：
body
{
margin: 0px;
padding: 0px;
font-size:12px;
}
#nav
{
… …/* 略 */
width:800px;
margin:0 auto;
}
#nav ul
{
… …
}
#nav ul li
{
float: left;
}
#nav ul li a
{
… …
}
#nav ul li a:hover
{
… …
}
B、父层LI的相对定位：
接着最关键就是定义：#nav ul li
{position:relative;}把第一层的LI定义成相对定位后，下拉菜单的绝对定位就不会偏移，而以其上层的LI做为参照，此外，需要对下拉菜单的列表做2项工作：
第一项：设置下拉列表的UL不显示：#nav ul li ul 设为display:none
。以及绝对定位position:absolute; left:3px; top:24px;
。
第二项：对下拉列表的LI浮动进行清除#nav ul li ul li 设为
float:none
；如果不清除也可以，但下拉列表的UL要设置宽度width:99px;，
当不设置此宽度也不清除浮动继承时，下拉菜单就变成横向出向
，如果你需要这种下拉效果，就不清除吧，如下图：
#nav ul li {position:relative;}
#nav ul li ul {
display:none;
margin:0;padding:0; position:absolute; left:3px; top:24px;
background-color:#FC9;width:99px;
border-bottom:1px solid #FC0;}
#nav ul li ul li
{width:99px;float:none;
border:0px 1px;}
C、光标移上去的状态定义：
定义完上面后，接着对下拉菜单在光标移到上层LI时的状态控制：
#nav ul li ul li a,#nav ul li ul li a:hover
{background:#3CF;width:98px;margin-left:0;text-align:left;border-top:1px solid #FC0;padding-left:5px;color:#000}
#nav ul li:hover ul, #nav li.over
ul
{display:block;}
这两行中，第一行#nav ul li ul li a,#nav ul li ul li a:hover {…}
作用是更改整个菜单第一层的LI对下拉部分影响，避免由于继承影响样式。
第二行是用于当光标移上去后，下拉菜单出现。大家可能注意到其中的.over类，我们并没有在结构代码中设置，这是为了控制等下JS生成的类。在#nav ul li:hover ul
中，FF下已经能够生效，不需要JS，但IE6下不行，需要通过后半句#nav li
.over
ul
配合JS来生效。
D、javascript代码：
<script type=”text/javascript”>
var showNavList
= function(){
if(document.all&&document.getElementById){
var navRoot = document.getElementById(“nav_top”); //注意不能用nav。
for(i=0;i<navRoot.childNodes.length;i++){
var node = navRoot.childNodes[i];
if(node.nodeName==’LI
‘){
node.onmouseover=function(){this.className+=’ over’;} //注意over前面有一个空格。
node.onmouseout =function(){this.className = this.className.replace(‘ over’,”);}
}
}
}
}
window.onload = showNavList;
</script>
这样，我们整个下拉菜单就完成了，效果参下面图例，完整代码附到后面，实际应用中，对下拉样式再做美化即可。
<!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=gb2312″ />
<title>CSS测试</title>
<style type=”text/css”>
<!–
body {
margin: 0px;
padding: 0px;
font-size:12px;
}
#nav {
background-color: #666;
border: thin solid #000;
height:100px;
border: 1px solid #666;
width:800px;
margin:0 auto;
}
#nav ul {
background-color: #900;
margin: 0px;
padding: 0px;
margin-right:16px;
margin-top:74px;
width:332px;
list-style-type: none;
float: right;
}
#nav ul li {
float: left;
}
#nav ul li a {
letter-spacing: 1px;
text-align: center;
display: block;
height: 22px;
width: 80px;
border-left: 1px solid #900;
color: #F96;
text-decoration: none;
padding-top: 4px;
background: url(/board.gif) no-repeat -12px -108px;
overflow: hidden;
margin-left: 2px;
}
#nav ul li a:hover {
color: #F60;
background: url(/board.gif) no-repeat -15px -118px;
padding-top: 6px;
overflow: hidden;
height: 20px;
width: 80px;
}
#nav ul li{position:relative;}
#nav ul li
ul{display:none;margin:0;padding:0;position:absolute;left:3px;top:24px;background-color:#FC9;width:99px;border-bottom:1px
solid #FC0;}
#nav ul li ul li{width:99px;float:none;border:0px 1px;}
#nav ul li ul li a,#nav ul li ul li
a:hover{background:#3CF;width:98px;margin-left:0;text-align:left;border-top:1px
solid #FC0;padding-left:5px;color:#000}
#nav ul li:hover ul, #nav li.over ul{display:block;}
.content{margin:0 auto;border:1px solid #33F;width:800px;}
.clear{font:0px/0px 宋体;clear:both;display:block}
–>
</style>
<script type=”text/javascript”>
var showNavList = function(){
if(document.all&&document.getElementById){
var navRoot = document.getElementById(“nav_top”);
for(i=0;i<navRoot.childNodes.length;i++){
var node = navRoot.childNodes[i];
if(node.nodeName==’LI’){
node.onmouseover=function(){this.className+=’ over’;}
node.onmouseout =function(){this.className = this.className.replace(‘ over’,”);}
}
}
}
}
window.onload = showNavList;
</script>
</head>
<body>
<div id=”nav”>
<ul id=”nav_top”>
<li id=”nav_index”><a href=”/”>首页</a></li>
<li><a href=”#”>CSS专栏</a>
<ul>
<li><a href=”#”>CSS基础</a></li>
<li><a href=”#”>CSS常用代码</a></li>
<li><a href=”#”>CSS高级技术</a></li>
</ul>
</li>
<li><a href=”#”>JQUERY</a>
<ul>
<li><a href=”#”>Juery基础</a></li>
<li><a href=”#”>Juery工厂函数</a></li>
<li><a href=”#”>Juery深入学习</a></li>
</ul>
</li>
<li><a href=”#”>论坛</a></li>
</ul>
<div class
=”clear”></div>
</div>
<div class=”content”>内容区</div>
<div class=”content”>版权区</div>
</body>
</html>
图例：
分享到：
相关推荐
2. **导航栏**：包括水平导航、下拉菜单、悬浮导航等常见的导航设计。 3. **响应式布局**：针对不同设备和屏幕尺寸的自适应布局。 4. **浮动布局**：利用浮动元素实现多列布局，解决内容溢出问题。 5. **定位布局**...
《JQuery模板与CSS+Div开发详解》 在Web开发领域，JQuery模板和CSS+Div的结合使用已经成为一种常见的高效开发方式。本篇将深入探讨这两种技术的原理、应用场景及其实现方法。 首先，JQuery是一个强大的JavaScript...
### DIV+CSS下拉菜单详解 #### 知识点一：HTML与CSS结合实现下拉菜单 在网页设计中，导航栏是用户交互的关键部分，其中下拉菜单因其节省空间且直观的特点而广受欢迎。本案例展示了一种利用HTML与CSS结合实现下拉...
### Jquery+CSS打造的滑动下拉菜单 在网页设计与开发中，导航菜单是不可或缺的一部分，良好的导航设计能够显著提升用户体验。本篇将基于提供的文件内容来深入解析如何运用Jquery结合CSS来实现一个滑动效果的下拉...
### 非常优秀的下拉菜单 DIV+CSS 源码知识点详解 #### 一、概述 本篇文章将深入分析一份“非常优秀的下拉菜单 DIV+CSS 源码”，该源码通过纯 CSS 实现了一个简洁且实用的下拉菜单效果。下拉菜单在网页设计中非常...
在网页设计中，`DIV`元素通常作为布局容器，而CSS（层叠样式表）用于定义页面的样式，包括颜色、字体、布局等，其中就包括创建各种类型的导航菜单。这个资源特别强调了实用性和实践性，旨在帮助开发者快速理解和应用...
### DIV_CSS下拉菜单知识点详解 #### 一、概述 在网页设计中，导航栏是不可或缺的一部分，而下拉菜单则是提升用户体验的重要元素之一。本文将详细介绍如何利用DIV与CSS来构建一个简单实用且视觉效果良好的下拉菜单...
### CSS_DIV超酷菜单导航知识点解析 #### 一、CSS_DIV与菜单导航概念理解 - **CSS**: 层叠样式表（Cascading Style Sheets）是一种用来表现HTML或XML等文件样式的计算机语言。 - **DIV**: 在HTML中，`<div>`是一个...
### 纯CSS打造的下拉菜单纵向实例详解 #### 一、引言 在Web开发中，导航菜单是用户界面的重要组成部分之一。一个设计合理、交互流畅的导航菜单不仅能够提升用户体验，还能够帮助用户更快地找到所需的信息。本文将...
### HTML + CSS 二级导航栏创建详解 #### 一、项目背景及目标 在Web开发过程中，导航栏作为用户交互的重要组成部分，对于提升用户体验具有重要意义。本文档将详细介绍如何使用HTML与CSS创建一个简单的二级导航栏。...
《jQuery手机移动端弹窗下拉菜单选择代码详解》 在移动设备上，用户交互体验的优化至关重要，而下拉菜单是网页设计中常见且实用的一种交互元素。jQuery，作为一款强大的JavaScript库，提供了丰富的功能来简化DOM...
### JavaScript、CSS、HTML 下拉式折叠菜单知识点详解 #### 一、项目概述 本案例展示了一个使用JavaScript、CSS及HTML实现的经典下拉式折叠菜单。该菜单在网页设计中非常常见，它不仅可以提高用户体验，还能使页面...
### CSS蓝紫色三级下拉垂直菜单知识点解析 #### 一、概述 在Web前端开发中，导航栏的设计是用户体验中的重要组成部分。一个清晰且美观的导航可以帮助用户更快地找到他们所需要的信息。本案例介绍了一个使用纯CSS...
### 不用JS实现的CSS下拉菜单特效 在网页设计中，导航栏是十分重要的一个组成部分，它不仅能够提升用户体验，还能使整个页面看起来更加整洁有序。本文将介绍一种完全利用CSS来实现下拉菜单的方法，这种方法不需要...
- **应用**：通过CSS和JavaScript的结合，可以实现下拉菜单、二级菜单等导航栏效果，提高网站导航的便捷性。 #### 8. **鼠标划过效果** - **概念**：当鼠标光标悬停在某个元素上时触发的效果。 - **应用**：在项目...
### 5款纯div+css制作的弹出菜单(标准且无js)——知识点解析 #### 一、标题与描述解读 本篇文章介绍的是“5款纯div+css制作的弹出菜单”，这些菜单的特点是完全使用HTML和CSS实现，没有使用任何JavaScript脚本。...
《CSS_DIV设计模板详解》 在网页设计领域，CSS（Cascading Style Sheets）与DIV元素的结合使用，已经成为构建高效、灵活且可维护的页面布局的重要手段。本篇文章将深入探讨“CSS_DIV设计模板”的核心概念，以及如何...
【CSS实现网页下拉菜单详解】 在网页设计中，下拉菜单是一种常见的导航元素，它允许用户通过鼠标悬停在主菜单项上显示子菜单，从而方便地访问多个相关页面。通常，下拉菜单的实现会涉及到JavaScript和CSS的结合使用...
**jQuery下拉菜单插件详解** 在Web开发中，下拉菜单是一种常见的交互元素，用于在有限的空间内展示丰富的选项。jQuery，一个流行的JavaScript库，提供了丰富的插件来实现各种功能，包括创建复杂的下拉菜单。本文将...