html与css经典二级菜单编写1

图示





其实使用css加上少量的js就可以做到上面的结果了

1.首先我们用 position: fixed;把一个div固定在顶部(我们这里值讨论固定在顶部的二级菜单,其他自已自行分析"举一仿3“即可)

div#header{
margin: 0px;
padding: 0px;
display: block;
background-color: #EEBFDC;
text-align: center;
height: 45px;
position: fixed;
left: 0px;
top: 0px;
width: 100%;
margin-bottom: 45px;
line-height:  45px;
}

这是头部的样式,主要是position部分

2.我们挑一个其中的二级菜单讲解,就一图的"我的淘宝",来编写他的二级菜单

<li class="my-taobao">
<div><a href="#">我的淘宝</a><span>ν</span></div>
<div class="menu-list">
<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>
<div style="clear:both"></div>
</div>
</li>

这里没什么特点,由于<li class="my-taobao">的父级标签是fixed的position(我们上面说过了),所以当<div class="menu-list">的大小超过父级标签(就是固定在顶部的标签),就会伸出该父级标签,此时已经是个二级的菜单了,不过很不像样

我们使用样式

/*导航的菜单li*/
div#container > div#header > ul#hRight li.web-nav .menu-list > div li{
list-style: none;
text-decoration: none;
display:inline;
}

主要是text-decroation和list-style将li以及a标签的圆点和下划线去掉

3.到这里你已经看到一个像样的二级..了,不过细心的你会发现,一级菜单会i和二级菜单的宽度同步,导致所有的一级菜单不齐

由于我们是<li class="my-taobao">套住一级和二级的,所以他的宽度会取决与二者的最大项,为了解决这个问题,我们必须改变二级菜单的position的属性

使他可以不影响一级菜单的情况下改变宽度,显然可以直接使用绝对布局,注意在用绝对布局时我们不给定他的left和top让他在原来的位子

div#container > div#header .menu-list{
/*如果不制定left与top在当前覆盖*/
background-color: #EEBFDC;
position: absolute;
margin: 0px;
padding:0px;
display: none;
/*-webkit-box-shadow:0px 5px 20px 2px #0CC;
0px 0 2px 3px #0CC,
0 0px 2px 3px #0CC,
0 0px 2px 3px #0CC;
-moz-box-box-shadow:0px 0 2px 3px #0CC,
0px 0 2px 3px #0CC,
0 0px 2px 3px #0CC,
0 0px 2px 3px #0CC;
box-box-shadow:0px 0 2px 3px #0CC,
0px 0 2px 3px #0CC,
0 0px 2px 3px #0CC,
0 0px 2px 3px #0CC;*/

border-radius: 0px 0px 4px 4px;
}

主要是position: absolute;

现在就王城了,还剩下js来控制二级菜单的隐藏和显示,这部分很简单就不讲了

最后当发现div中的lu跳出div时,使用

<div style="clear:both"></div>

完整的

<li class="my-taobao">
<div><a href="#">我的淘宝</a><span>ν</span></div>
<div class="menu-list">
<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>
<div style="clear:both"></div>
</div>
</li>