<div id="header" class="wrap">
<div id="logo"><img src="images/logo.gif" /></div>
<div class="help"><a href="#" class="shopping">购物车</a><a href="login.html">登录</a><a href="register.html">注册</a><a href="guestbook.html">留言</a></div>
<div class="navbar" >
<ul class="clearfix" id="clearfix">
<li οnmοuseοver="onmouseOver(this,'child0')" class="current"><a href="#">首页</a></li>
<li οnmοuseοver="onmouseOver(this,'child1')"><a href="#">图书</a></li>
<li οnmοuseοver="onmouseOver(this,'child2')"><a href="#">百货</a></li>
<li οnmοuseοver="onmouseOver(this,'child3')"><a href="#">品牌</a></li>
<li οnmοuseοver="onmouseOver(this,'child4')"><a href="#">促销</a></li>
</ul>
</div>
</div>
实现的效果是当用户鼠标悬停在主菜单上的时候显示的是所有的信息当用户鼠标悬停在百货的时候显示百货的信息不显示其他的信息实现
实现动态的显示
<script type="text/javascript">
/*鼠标悬停的时候的样式*/
function onmouseOver(Obj,ulId){
/*获得当前ul节点下的子节点的数量*/
var length = document.getElementById("clearfix").getElementsByTagName("li").length;
var ulLength = document.getElementById("wrap").getElementsByTagName("ul").length;
//alert(ulLength);
for(i = 0;i<ulLength;i++){
document.getElementById("wrap").getElementsByTagName("ul")[i].style.display="none";
}
/*使用循环改变当前样式*/
for(i = 0;i<length;i++){
document.getElementById("clearfix").getElementsByTagName("li")[i].className="";
}
/*设置当前对象的样式*/
Obj.className="current";
document.getElementById(ulId).style.display="block";
}
</script>
<div id="childNav">
<div class="wrap" id="wrap">
<ul class="clearfix" id="child0">
<li class="first"><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>
<li><a href="#">婴幼奶粉</a></li>
<li><a href="#">饰品</a></li>
<li class="last"><a href="#">Investor Relations</a></li>
</ul>
<ul class="clearfix" id="child1">
<li class="first"><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>
<li><a href="#">数码相机</a></li>
<li class="last"><a href="#">Investor Relations</a></li>
</ul>
</div>
</div>
<div id="main" class="wrap">
<div class="lefter">
<div class="box">
<h2>商品分类</h2>
<dl>
<dt>图书音像</dt>
<dd><a href="product-list.html">图书</a></dd>
<dd><a href="product-list.html">音乐</a></dd>
<dt>百货</dt>
<dd><a href="product-list.html">运动健康</a></dd>
<dd><a href="product-list.html">服装</a></dd>
<dd><a href="product-list.html">家居</a></dd>
<dd><a href="product-list.html">美妆</a></dd>
<dd><a href="product-list.html">母婴</a></dd>
<dd><a href="product-list.html">食品</a></dd>
<dd><a href="product-list.html">手机数码</a></dd>
<dd><a href="product-list.html">家具首饰</a></dd>
<dd><a href="product-list.html">手表饰品</a></dd>
<dd><a href="product-list.html">鞋包</a></dd>
<dd><a href="product-list.html">家电</a></dd>
<dd><a href="product-list.html">电脑办公</a></dd>
<dd><a href="product-list.html">玩具文具</a></dd>
<dd><a href="product-list.html">汽车用品</a></dd>
</dl>
</div>
<div class="spacer"></div>
<div class="last-view">
<h2>最近浏览</h2>
<dl class="clearfix">
<dt><img src="images/product/0_tiny.gif" /></dt>
<dd><a href="product-view.html">法国德菲丝松露精品巧克力500g/盒</a></dd>
<dt><img src="images/product/0_tiny.gif" /></dt>
<dd><a href="product-view.html">法国德菲丝松露精品巧克力500g/盒</a></dd>
</dl>
</div>
</div>
<div class="main">
<div class="price-off">
<h2>今日特价</h2>
<ul class="product clearfix">
<li>
<dl>
<dt><a href="product-view.html" target="_blank"><img src="images/product/1.jpg" /></a></dt>
<dd class="title"><a href="product-view.html" target="_blank">法国德菲丝松露精品巧克力500g/盒</a></dd>
<dd class="price">￥108.0</dd>
</dl>
</li>
</ul>
</div>
<div class="side">
<div class="news-list">
<h4>最新公告</h4>
<ul>
<li><a href="news-view.html" target="_blank">抢钱啦</a></li>
</ul>
</div>
<div class="spacer"></div>
<div class="news-list">
<h4>新闻动态</h4>
<ul>
<li><a href="news-view.html" target="_blank">抢钱啦</a></li>
</ul>
</div>
</div>
<div class="spacer clear"></div>
<div class="hot">
<h2>热卖推荐</h2>
<ul class="product clearfix">
<li>
<dl>
<dt><a href="product-view.html" target="_blank"><img src="images/product/1.jpg" /></a></dt>
<dd class="title"><a href="product-view.html" target="_blank">法国德菲丝松露精品巧克力500g/盒</a></dd>
<dd class="price">￥108.0</dd>
</dl>
</li>
</ul>
</div>
</div>
<div class="clear"></div>
</div>
<div id="footer">
Copyright © 2010 北大青鸟 All Rights Reserved. 京ICP证1000001号
</div>
</body>
</html>
