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>