Dreamweaver8系列DIV+CSS教程下拉及多级弹出菜单

增加完代码后，在浏览器里预览一下：

是不是一看头都大了，怎么变成这样了。别懵，我们分析一下 错乱的原因。首先我们

看下

“

自适应宽 度

”

和

“

固定 宽度

”

两个二级菜单也继承了一级菜单的背景和横向排列，

所以我

们先把二级菜单的背景和浮动清除掉，增加以下

css

代码：

#menu

ul

li

ul

li

{

float:none;}

#menu

ul

li

ul

li

a

{

background:none;}

< br>现在预览看下，

二级菜单是不是已经归位了，

但鼠标划过 时还继承了一级菜单的样式，

所以也改为最终效果上的黑色背景白色文字，

还有下拉菜单的灰色边框和灰色背景也一并加

上，修改并增加如下代码：

#menu

ul

li

ul

{

border:1px

solid

#ccc;}

#menu

ul

li

ul

li

{

float:none;

width:85px;

background:#eee;

margin:0;}

#menu

ul

li

ul

li

a

{

background:none;}

#menu

ul

li

ul

li

a:hover

{

background:#333;

color:#fff;}

第一行设置二级菜单的灰色边框； 为了美观，我们把下拉菜单的宽度设置成和一级菜

单宽度相同，

第二行的

width:85px

再加上第一行上设置的边框左右 各

1px

后正好是

87p

x

，和一级菜单宽度相同。

margin:0

是为了清除掉继承一级菜单中

margin-left:2px

；最

后一行设置鼠标划过时的样式。

再预览一下，是不是基本的样式已实现了。

下一步就该把二级菜单隐藏，当鼠标划过时显示出来了。增加 如下代码：

#menu

ul

li

ul

{

display:none;

border:1px

solid

#ccc;}

#menu

ul

li:hover

ul

{

display:block;}

注意第二行的写法，

#menu

ul

li:hover

ul

这个样比较难 理解，它的意思是定义当

鼠标划过

#menu

< br>下

ul

下

li

< br>时，

li

下的

ul

的样式（有点饶舌）

，这里设置为

display: bloc

k

，意思是鼠标划过时显示这块内容。开始隐藏，鼠标 划过时显示，

这就实现了我们想要

的 效果。目前

IE6

只支持

a

IE6

下也显示正

确，需要借助

js

来实现 。我们定义一个类

.sfhover

（自己命名，需和

JS

中相同）的属性

为

display:block;

然后当鼠标划过后，

用

JS

给当前

li

添加上 这个样式上，

根据

css

的优先

级：指定的高于继承的原则，就实现了

IE6

下的正确显示。所以增加如下代码：

#menu

ul

r

ul

{

display:block;}

认真跟着教程制作的朋友可能已经发现，

现在应用的

JS< /p>

和纵向导航时应用的不样，

但

最终实现的 效果是一样的。同理

css

在布局网站时，也是可以多种方法的 ，正所谓条条大

道通罗马，希望大家举一反三，加深前面教程的掌握。

< br>JS

部分本例不做讲解，如果你想弄

清楚

JS

是如何实现的，请学习

js

相关内容。到这里，本例就基本完成了，还有一个问题是

当前导航下有内容的话，如果 二级菜单显示，将会把下边的内容挤跑，所以需要给

#menu

ul

li

ul

增加

position:absolute;

属性，当其绝 对定位后，它将脱离原来文档流，不再占

据空间，因此也不会再把下边内容挤跑了（欲更 多了解绝对定位，请查看之前教程或

http://

/div_ css/

）

。完整的预览代码如下：

html

PUBLIC

XHTML

1.0

Transitional//EN

< br>

用热情和汗水 打造属于自己的梦想！