【教程】导航菜单（一）纯CSS写法

测试浏览器：chrome，ie8

效果图如下：

html代码

<div class="fleft w100b menu">

    <div class="box">
    
        <ul class="fleft w1100p ul_menu">
        
            <li class="li_menu">
                <a href="index.html" class="a_menu1">首页</a>            </li>
            
            <li class="li_menu">
                <a href="list.htm" class="a_menu2">关于我们</a>
                <ul class="ul_menu_ul">
                    <li class="li_menu_li"><a href="list.htm" class="a_menu3">主题简介</a></li>
                    <li class="li_menu_li"><a href="list.htm" class="a_menu3">荣誉展示</a></li>
                    <li class="li_menu_li"><a href="list.htm" class="a_menu3">品牌介绍</a></li>
                </ul>
            </li>
            
            <li class="li_menu">
                <a href="list.htm" class="a_menu2">新闻动态</a>
                <ul class="ul_menu_ul">
                    <li class="li_menu_li"><a href="list.htm" class="a_menu3">主题新闻</a></li>
                    <li class="li_menu_li"><a href="list.htm" class="a_menu3">行业新闻</a></li>
                    <li class="li_menu_li"><a href="list.htm" class="a_menu3">通知公告</a></li>
                </ul>
            </li>
            
            <li class="li_menu">
                <a href="list.htm" class="a_menu2">解决方案</a>            </li>
            
            <li class="li_menu">
                <a href="list2.htm" class="a_menu2">主题掠影</a>
                <ul class="ul_menu_ul">
                    <li class="li_menu_li"><a href="list2.htm" class="a_menu3">活动掠影</a></li>
                    <li class="li_menu_li"><a href="list2.htm" class="a_menu3">精彩图集</a></li>
                </ul>
            </li>
            
            <li class="li_menu">
                <a href="list.htm" class="a_menu2">联系我们</a>
                <ul class="ul_menu_ul">
                    <li class="li_menu_li"><a href="contactus.htm" class="a_menu3">联系方式</a></li>
                    <li class="li_menu_li"><a href="message.htm" class="a_menu3">在线留言</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

css代码

body {
        margin: 0;
        padding: 0;
        font-family: "微软雅黑";
        font-size: 14px;
        color: #333333;
    }
    a {
        color: #666666;
        text-decoration: none;
    }
    a:hover {
        color: #04448e;
    }
    
    .code {
        float: left;
        width: 100%;
        margin-top: 200px;
    }
    .tarea {
        width: 99%;
        height: 500px;
    }
    
    .w100b {
        width: 100%;
    }
    .w1100p {
        width: 1100px;
    }
    .box {
        width: 1100px;
        margin: 0 auto;
        padding: 0;
        position: relative;
    }
    .fleft {
        float: left;
    }
    .fright {
        float: right;
    }
    
    /* menu css*/
    .menu {
        height: 40px;
        margin: 0;
        padding:0;
        position: relative;
        z-index: 9999;
        /*filter: Alpha(Opacity=80);
        Opacity: 0.8;*/
    }
    .ul_menu {
        width: 1000px;
        height: 40px;
        margin: 0;
        padding: 0;
        padding-left: 100px;
        list-style-type: none;
        background-color: #04448e;
        border-radius: 5px;
        position: relative;
    }
    .li_menu {
        float: left;
        width: 150px;
        height: 40px;
        margin: 0;
        padding: 0;
        text-align: center;
        line-height: 40px;
        border-right: 1px #017cca solid;
        font-size: 16px;
    }
    .a_menu1,.a_menu2 {
        float: left;
        width: 150px;
        height: 40px;
        color: #fff;
    }
    .a_menu1 {
        background-color: #017cca;
    }
    .a_menu1:hover {
        color: #FFFFFF;
    }
    .a_menu2:hover {
        color: #FFFFFF;
        background-color: #017cca;
    }
    .ul_menu_ul {
        width: 150px;
        margin: 40px 0 0;
        padding: 0;
        list-style-type: none;
        position:absolute;
        display: none;
        background-color:#FFFFFF;
        /*filter: Alpha(Opacity=80);
        Opacity: 0.8;*/
    }
    .li_menu_li {
        float: left;
        width: 150px;
        margin: 0;
        padding: 0;
        text-align: center;
        line-height: 35px;
        border-bottom: 1px #ccc dotted;
        font-size: 14px;
    }
    .ul_menu li:hover ul {
        display: block;
    }