当当网导航菜单实例仅供学习

<body>
<div id="welcome" class="wrap">
<ul>
    <li class="login">欢迎光临当当网，请<a href="#">登录</a><a href="#">免费注册</a></li>
        <li class="shopping"><a href="#">购物车</a></li>
        <li><em></em><a href="#">我的订单</a></li>
        <li><em></em><a class="arrow" href="#">我的当当</a></li>
        <li><em></em><a class="arrow" href="#">礼品卡</a></li>
        <li><em></em><a href="#">帮助</a></li>
    </ul>
</div>
<div id="mainNav" class="wrap">
<div id="logo"><img src="images/logo.gif" /></div>
    <div class="large">
    <div class="organge">网上购物享当当</div>
        <ul>
        <li class="home"><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>
    <div class="side">
    <ul>
        <li><a href="#">商家</a></li>
        <li><em></em><a href="#">当当榜</a></li>
        <li><em></em><a class="arrow" href="#">礼物</a></li>
        <li><em></em><a href="#">在线读书</a></li>
        <li><em></em><a class="arrow" href="#">更多服务</a></li>
        </ul>
    </div>
</div>
<div id="navbar">
<ul class="wrap">
    <li><a href="#">音乐</a></li>
    <li><em></em><a href="#">影视</a></li>
    <li><em></em><a href="#">少儿</a></li>
    <li><em></em><a href="#">教辅</a></li>
    <li><em></em><a href="#">小说</a></li>
    <li><em></em><a href="#">外语</a></li>
    <li><em></em><a href="#">数码相机</a></li>
    <li><em></em><a href="#">笔记本</a></li>
    <li><em></em><a href="#">连衣裙</a></li>
    <li><em></em><a href="#">高跟鞋</a></li>
    <li><em></em><a href="#">运动鞋</a></li>
    <li><em></em><a href="#">美容护肤</a></li>
    <li><em></em><a href="#">厨卫用品</a></li>
    <li><em></em><a href="#">婴幼奶粉</a></li>
    <li><em></em><a href="#">玩具</a></li>
    <li><em></em><a href="#">没事保健</a></li>
    <li><em></em><a href="#">饰品</a></li>
    </ul>
</div>

</body>

@charset "utf-8";
/* CSS Document */
body { padding:0; margin:0; font-size:12px; line-height:22px; }
ul,li { margin:0; padding:0; }
ul { list-style:none; }
.wrap { 960px; margin:0 auto; }
#welcome ul { margin-left:450px; }
#welcome ul li { float:left; }
#welcome ul li a { color:#000000; text-decoration:none; margin:0 5px; }
#welcome ul li.login a { color:#1a66b3; }
#welcome ul li.shopping { background:url(../images/shopping.gif) left center no-repeat; padding-left:20px; }
#welcome ul li em { display:block; float:left; height:7px; margin:6px 0; border-right:1px solid #bcbcbc; overflow:hidden; }
#welcome ul li a.arrow { background:url(../images/arrow.gif) right center no-repeat; padding-right:12px; }
#mainNav #logo { float:left; 160px; text-align:center; }
#mainNav .large { float:left; 450px; }
#mainNav .large .organge { color:#ff6600; }
#mainNav .large ul li { float:left; margin:0 2px; line-height:30px; font-size:14px; text-align:center; font-weight:bold; }
#mainNav .large ul li a { display:block; background:url(../images/nav_bg.gif); 77px; text-decoration:none; color:#333; }
#mainNav .large ul li.home a { background:url(../images/nav_home.gif); 59px; color:#fff; }
#mainNav .side { float:right; margin-top:30px; }
#mainNav .side ul li { float:left; font-weight:bold; }
#mainNav .side ul li em { display:block; float:left; height:7px; margin:6px 0; border-right:1px solid #bcbcbc; overflow:hidden; }
#mainNav .side ul li a { margin:0 5px; color:#333; text-decoration:none; }
#mainNav .side ul li a.arrow { background:url(../images/arrow.gif) right center no-repeat; padding-right:12px; }
#navbar { clear:both; background:#fc883b; height:30px; }
#navbar ul li { float:left; line-height:30px; }
#navbar ul li a { color:#fff; text-decoration:none; padding:0 9px; }
#navbar ul li em { display:block; float:left; border-left:#dc6b04; border-right:1px solid #fba455; height:5px; margin:12px 0; overflow:hidden; }