2015-9.12(多级导航)

 

 

<div class="main">
        <ul class="nav" id="menu">
            <li><a href="javascript:;" class="level">精彩活动1</a>
                <div class="show_con">
                    <a href="javascript:;">精彩活动2</a>
                    <a href="javascript:;">节目介绍2</a>
                    <a href="javascript:;">精彩内容2</a>
                </div>
            </li>
            <li><a href="javascript:;" class="level">节目介绍1</a>
                <div class="show_con">
                    <a href="javascript:;">精彩活动2</a>
                    <a href="javascript:;">节目介绍2</a>
                    <a href="javascript:;">精彩内容2</a>
                </div>
            </li>
            <li><a href="javascript:;" class="level">精彩内容1</a>
                <div class="show_con">
                    <a href="javascript:;">精彩活动2</a>
                    <a href="javascript:;">节目介绍2</a>
                    <a href="javascript:;">精彩内容2</a>
                </div>
            </li>
        </ul>
    </div>

 

.main ul{width:384px;background:#8BD400;height:55px;}
.main ul li{position:relative;float:left;list-style:none;width:128px;background:#8BD400;}
.main ul li a.level {display:block;height:55px;border:1px solid #ccc;color:#fff;text-align:center;line-height:55px;} 
.main ul .show_con{background:#8BD400;width:128px;}
.main ul .show_con a {display:none;height:55px;border:1px solid #ccc;color:#fff;text-align:center;line-height:55px;}