怎么做出这样的菜单栏-HTML教程-爱易网页

怎么做出这样的菜单栏

日期：2014-05-17　浏览次数：20570 次

如何做出这样的菜单栏?
我知道是用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;
            }

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

怎么做出这样的菜单栏

相关资料更多>

推荐阅读更多>