如何制作重叠效果的菜单

我们来学习一下如何用CSS制作重叠效果的菜单，首先我们要知道什么是重叠菜单？大家看图一就明白了，重叠菜单就是在设计图中一个盖在另一个上面的菜单效果。

 

当然这个菜单的效果全要靠背景图体现出来，制作难点就在重叠部分背景和第一个菜单背景的运用，除此之外还有当前状态的背景运用。

下面我以图一中的黑底菜单为例讲解一下重叠菜单的制作方法。

首先，将菜单所用的背景图全部裁切出来，背景图分为三张，图二中A为第一个菜单的背景，B为当前状态的背景，C为普通菜单的背景。这三个背景都是缺一不可的，下面再讲怎么应用。

其次，写出菜单的Html代码：
<div id="header">
<div id="menu">
<ul>
<li class="home"><a href="#">首页</a></li>
<li class="here"><a href="#">频道</a></li>
<li><a href="#">节目单</a></li>
<li><a href="#">资讯</a></li>
<li><a href="#">百科</a></li>
</ul>
</div>
</div>

菜单的代码十分简单，用header为背景，menu作为菜单的容器，菜单项用项目列表ul和li列出即可。真正的背景效果体现在CSS中。

以下为CSS代码：

<style>
* {
padding:0;
margin:0;
font-style:normal;
}
ul,li,ol,dl,dt,dd {
list-style:none;
}
a,
a:link,
a:visited {
color:#FFF;
text-decoration:none;
font-size:14px;
}
a:hover,
a:active {
color:#ed6d00;
}
#header {
height:50px;
background:#000;
}
#menu {
height:22px;
padding:20px 0 0 30px;
}
#menu li {
width:123px;
height:22px;
background:url(c.gif); /*普通菜单的背景*/
text-align:center;
float:left;
line-height:22px;
margin:0 0 0 -6px;/*向左偏移6像素，让菜单重叠*/
z-index:8; /*Z轴浮动层次*/
position:relative;
}
#menu li.home {
background:url(a.gif);/*第一个菜单的背景*/
width:115px;
}
#menu li.here {
width:126px;
background:url(b.gif);/*当前状态的背景图*/
z-index:10;/*Z轴浮动层次*/
}
</style>

在CSS中，首先定义所有菜单项的背景，使用背景c.gif，并使每个菜单项向左偏移6像素产生重叠效果。然后让第一菜单项的背景为a.gif，让当前状态的背景为b.gif，并使当前状态的Z轴置于其它普通菜单项上面。

这样，一个简单的重叠菜单就制作好了，您也可以按照这个方法制作其它背景的菜单