怎么做出这样的菜单栏
日期：2014-05-17 浏览次数：20651 次
如何做出这样的菜单栏?
我知道是用div-ul-li来做，但不知道如何实现。
就是顶部那个可以下拉的列表，还有菜单栏那个带背景色的，怎么做的呢？
假如是下面这段代码，应该怎么写呢？
------解决方案--------------------
楼主参考下 下拉的导航
至于主导航就是普通的导航，
点击哪个栏目，背景橘色的是个背景图。
我知道是用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;
}
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
