如何制作重叠效果的菜单

 

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

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

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

其次，写出菜单的Html代码：
<div id="header">
<div id="menu">
<ul>
<li class="home"><a href="#">首页<,如何制作一个网站 做网站必备六步;/a></li>
<li class="here",如何制作一个div+css静态页面;><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轴置于其它普通菜单项上面。

这样，一个简略的重叠菜单就制作好了，你也能够依照这个方式制造其它背景的菜单

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