[置顶] 后台导航栏下拉列表 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