如何做出这样的菜单栏?
我知道是用div-ul-li来做，但不知道如何实现。
就是顶部那个可以下拉的列表，还有菜单栏那个带背景色的，怎么做的呢？
假如是下面这段代码，应该怎么写呢？
<div id="main"><a id="link" href="http://www.jianzhan.in">首页</a>|<a id="link" target="_blank" href="http://bbs.jianzhan.in">交流论坛</a>|<a id="link" href="http://www.6la.co" target="_blank">域名注册</a>|<a id="link" target="_blank" href="http://bbs.jianzhan.in/forum-60-1.html">疑问解答</a>|<a id="link" target="_blank" href="http://bbs.jianzhan.in/forum-59-1.html">国际域名交易</a>|<a id="link" href="http://bbs.jianzhan.in/forum-45-1.html" target="_blank">运营经验分享</a>|<a id="link" target="_blank" href="http://bbs.jianzhan.in/forum-49-1.html">到期域名出售</a>|<a id="link" target="_blank" href="http://bbs.jianzhan.in/forum-56-1.html">dns经验分享</a>|<a id="link" target="_blank" href="http://bbs.jianzhan.in/thread-20-1-1.html">国际域名抢注</a>|<a id="link" target="_blank" href="http://bbs.jianzhan.in/thread-2-1-1.html">本站导航</a></div>==============下面是对应的CSS=====================#main {width:960px;height:20px;font-size:18px;background-color:#FFE808;color:#FFF;text-align:center;padding:3px;}<!DOCTYPE HTML><html> <head> <meta charset="gb2312" /> <title></title> <style> * { margin:0; padding:0; font-size:12px; } a { color:#000; text-decoration:none; } a:hover { text-decoration:underline; color:red; } ul {list-style:none;} .menu { height:37px; background:#eee; } .menu-inner { margin:0 auto; width:980px; } .menu-logo { float:left; width:167px; } .menu-logo img {width:160px; height:36px;} .menu-list { float:left; margin-left:16px; padding-top:12px; } .menu-item { float:left; position:relative; } .menu-item-a { display:block; padding:0 4px; } .menu-item-hover { position:relative; top:-6px; z-index:99; padding:5px 3px; border:1px solid #999; border-bottom:none; background:#fff; } .menu-panel { display:none; position:absolute; top:18px; right:0; padding:6px; background:#fff; border:1px solid #999; white-space:nowrap; } .menu-panel a{ display:block; height:22px; line-height:22px; } .menu-panel a:hover { background:#eee; } .menu-item-down { display:inline-block; position:relative; left:-5px; top:0; width:12px; height:4px; overflow:hidden; } .menu-item-down span { position:absolute; left:0; top:-7px; } .menu-item-up span { top:0; } </style> </head> <body> <div class="menu"> <div class="menu-inner"> <div class="menu-logo"> <img src="test123.jpg" alt="LOGO" /> </div> <div class="menu-list"> <ul> <li class="menu-item"> <a href="#" class="menu-item-a"> 国内新闻 <span class="menu-item-down"><span>◆</span></span> </a> <div class="menu-panel"> <ul> <li><a href="#">国内新闻内新闻内新闻内新闻</a></li> <li><a href="#">国内新内新内新闻</a></li> <li><a href="#">国内内内新闻</a></li> <li><a href="#">国内内内内新闻</a></li> </ul> </div> </li> <li class="menu-item"> <a href="#" class="menu-item-a"> 国外新闻 </a> <div class="menu-panel"> <ul> <li><a href="#">国内新内新内新闻</a></li> <li><a href="#">国内新闻</a></li> <li><a href="#">国内新闻</a></li> <li><a href="#">国内新闻</a></li> </ul> </div> </li> <li class="menu-item"> <a href="#" class="menu-item-a"> 国外新闻 <span class="menu-item-down"><span>◆</span></span> </a> <div class="menu-panel"> <ul> <li><a href="#">国内新内新内新闻</a></li> <li><a href="#">国内新闻</a></li> <li><a href="#">国内新闻</a></li> <li><a href="#">国内新闻</a></li> </ul> </div> </li> </ul> </div> </div> </div> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $('.menu-item').mouseover(function(){ $(this).children('a').addClass('menu-item-hover').find('.menu-item-down').addClass('menu-item-up'); $(this).find('.menu-panel').show(); }).mouseout(function(){ $(this).children('a').removeClass('menu-item-hover').find('.menu-item-down').removeClass('menu-item-up'); $(this).find('.menu-panel').hide(); }) </script> </body></html>