我知道是用div-ul-li来做，但不知道如何实现。
就是顶部那个可以下拉的列表，还有菜单栏那个带背景色的，怎么做的呢？
假如是下面这段代码，应该怎么写呢？
- HTML code
<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;
}
------解决方案--------------------
楼主参考下 下拉的导航
至于主导航就是普通的导航，
点击哪个栏目，背景橘色的是个背景图。
- HTML code
<!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>