[置顶] 后台导航栏下拉列表 css+div 样式代码 及示例下载（灾情分享网）

样式效果图====================================================

页面代码======================================================

<div class="left_box">
                        <div class="divNav">
                            <ul id="nav" class="container">
                                <%--<li class="menu">
                                    <ul>
                                        <li class="button"><a href="#" class="green">Kiwis <span></span></a></li>
                                        <li class="dropdown">
                                            <ul>
                                                <li><a href="#" onclick="$('.button a').eq(2).click();return false;">Open Grapes Section</a></li>
                                                <li><a href="#" onclick="$('.dropdown').slideUp('slow');return false;">Close This Section</a></li>
                                                <li><a href="#">Read on Wikipedia</a></li>
                                                <li><a href="#">Flickr Stream</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>--%>
                                <li class="menu">
                                    <ul>
                                        <li class="button"><a href="../default.aspx" class="blue" target="_parent">首页<span></span></a>
                                        </li>
                                        <li class="dropdown">
                                            <ul>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                                <li class="menu">
                                    <ul>
                                        <li id="nav_Disaster" class="button"><a href="#" class="green">灾情管理<span></span></a></li>
                                        <li class="dropdown">
                                            <ul>
                                                <li><a href="../admin/Disaster/MyAuditDisastersList.aspx" target="main">灾情列表</a></li>
                                                <li><a href="../admin/Disaster/MyNoAuditDisastersList.aspx" target="main">未审核列表</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                                <li id="nav_Video" class="menu">
                                    <ul>
                                        <li class="button"><a href="#" class="orange">视频管理 <span></span></a></li>
                                        <li class="dropdown">
                                            <ul>
                                                <li><a href="../admin/Video/MyAuditVideosList.aspx" target="main">视频列表</a></li>
                                                <li><a href="../admin/Video/MyNoAuditVideosList.aspx" target="main">未审核列表</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                                <li id="nav_Picture" class="menu">
                                    <ul>
                                        <li class="button"><a href="#" class="blue">图片管理 <span></span></a>
                                            <li class="dropdown">
                                                <ul>
                                                    <li><a href="../admin/Pics/MyAuditPicsList.aspx" target="main">图片列表</a></li>
                                                    <li><a href="../admin/Pics/MyNoAuditPicsList.aspx" target="main">未审核列表</a></li>
                                                </ul>
                                            </li>
                                    </ul>
                                </li>
                                <li class="menu">
                                    <ul>
                                        <li class="button" id="nav_News"><a href="#" class="red">新闻管理 <span></span></a></li>
                                        <li class="dropdown">
                                            <ul>
                                                <li><a href="../admin/Text/MyAuditTextsList.aspx" target="main">新闻列表</a></li>
                                                <li><a href="../admin/Text/MyNoAuditTextsList.aspx" target="main">未审核列表</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                                <li class="menu">
                                    <ul>
                                        <li class="button"><a href="#" class="green">需求管理 <span></span></a></li>
                                        <li class="dropdown">
                                            <ul>
                                                <li><a href="../admin/demand/MyAuditDemandsList.aspx" target="main">需求列表</a></li>
                                                <li><a href="../admin/demand/MyNoAuditDemandsList.aspx" target="main">未审核列表</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                                <li class="menu">
                                    <ul>
                                        <li class="button"><a href="#" class="orange">灾情类别管理 <span></span></a></li>
                                        <li class="dropdown">
                                            <ul>
                                                <li><a href="../admin/DisasterCategory/list.aspx?category=audit" target="main">灾情类别列表</a></li>
                                                <li><a href="../admin/DisasterCategory/list.aspx?category=noaudit" target="main">未审核列表</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                                <li class="menu">
                                    <ul>
                                        <li class="button"><a href="#" class="blue">需求类别管理<span></span></a></li>
                                        <li class="dropdown">
                                            <ul>
                                                <li><a href="../admin/DemandCategory/list.aspx?category=audit" target="main">需求类别列表</a></li>
                                                <li><a href="../admin/DemandCategory/list.aspx?category=noaudit" target="main">未审核列表</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                                <li class="menu">
                                    <ul>
                                        <li class="button" id="nav_Android"><a href="#" class="red">Android下载管理 <span></span>
                                        </a></li>
                                        <li class="dropdown">
                                            <ul>
                                                <li><a href="../admin/" target="main">Android下载列表</a></li>
                                                <li><a href="../admin/" target="main"></a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                                <li id="nav_Iphone" class="menu">
                                    <ul>
                                        <li class="button"><a href="#" class="green">iPhone下载管理 <span></span></a></li>
                                        <li class="dropdown">
                                            <ul>
                                                <li><a href="" target="main">iPhone下载列表</a></li>
                                                <li><a href="" target="main"></a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                                <li class="menu">
                                    <ul>
                                        <li class="button"><a href="#" class="blue">服务器管理 <span></span></a></li>
                                        <li class="dropdown">
                                            <ul>
                                                <li><a href="../admin/Server/list.aspx?category=audit" target="main">服务器列表</a></li>
                                                <li><a href="../admin/Server/list.aspx?category=noaudit" target="main">未审核列表</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>

样式代码 ==========================================================

/* start===================*/

ul{margin:0;padding:0;}

ul.container{/* The topmost UL */width:85%;}
li{list-style:none;text-align:left;}
li.menu{/* The main list elements */padding:5px 0;width:100%;}

li.button a{/* The section titles */display:block;font-family:BPreplay,Arial,Helvetica,sans-serif;font-size:20px;height:25px;overflow:hidden;padding:10px 20px 0;position:relative;width:85%;}

li.button a:hover{/* Removing the inherited underline from the titles */text-decoration:none;}

li.button a span{/* This span acts as the right part of the section's background */height:30px;position:absolute;right:0;top:0;width:4px;display:block;}

/* Setting up different styles for each section color */
li.button a.blue{background:url(../images/blue.png) repeat-x top left; color:#074384;}
li.button a.blue span{ background:url(../images/blue.png) repeat-x top right;}

li.button a.green{background:url(../images/green.png) repeat-x top left; color:#436800;}
li.button a.green span{ background:url(../images/green.png) repeat-x top right;}

li.button a.orange{background:url(../images/orange.png) repeat-x top left; color:#882e02;}
li.button a.orange span{ background:url(../images/orange.png) repeat-x top right;}

li.button a.red{background:url(../images/red.png) repeat-x top left; color:#641603;}
li.button a.red span{ background:url(../images/red.png) repeat-x top right;}

/* The hover effects */
li.button a:hover{ background-position:bottom left;}
li.button a:hover span{ background-position:bottom right;}
.dropdown{/* The expandable lists */display:none;padding-top:5px;width:100%;}
.dropdown li{/* Each element in the expandable list */background-color:#373128; height:20px; font-size:18px;border:1px solid #40392C;color:#CCCCCC;margin:5px 0;padding:4px 18px;}
/* The styles below are only necessary for the demo page */
.dropdown li a{display:block;}
h1{font-family:"Myriad Pro",Arial,Helvetica,sans-serif;font-size:36px;font-weight:normal;margin-bottom:15px;}
h2{font-family:"Myriad Pro",Arial,Helvetica,sans-serif;font-size:12px;font-weight:normal;padding-right:140px;right:0;text-align:right;text-transform:uppercase;top:15px;}
.clear{clear:both;}
#main{/* The main container */margin:15px auto;text-align:center;width:920px;position:relative;}
a, a:visited {color:#0196e3;text-decoration:none;outline:none;}
a:hover{text-decoration:underline;}
p{/* The tut info on the bottom of the page */padding:10px;text-align:center;}
/* end===================*/===========

此外还需要引入几个Jquary文件

地址：http://download.csdn.net/detail/wsq724439564/5165651