CSS弹出式菜单范例
网页文件(PHP文件)：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="zh-cn" /> <title>公路工程管理系统</title> <link href="style.css" mce_href="style.css" rel="stylesheet" type="text/css"/> </head> <html> <body> <!-- div id="topmenu"--> <!--ul --> <div id="topmenu"> <div id="dymenu"> <ul class="root"> <li><a href="#" mce_href="#">首 页</a></li> <li><a href="#" mce_href="#">综合科</a> <ul> <li><a href="#" mce_href="#">后勤管理</a></li> <li><a href="#" mce_href="#">档案管理</a></li> <li><a href="#" mce_href="#">财务管理</a></li> <li><a href="#" mce_href="#">拆迁管理</a></li> </ul> </li> <li><a href="#" mce_href="#">技术科</a></li> <ul> <li><a href="#" mce_href="#">变更管理</a></li> <li><a href="#" mce_href="#">技术管理</a></li> <li><a href="#" mce_href="#">报建管理</a></li> <li><a href="#" mce_href="#">图纸管理</a></li> </ul> <li><a href="#" mce_href="#">工程科</a> <ul> <li><a href="#" mce_href="#">计量管理</a></li> <li><a href="#" mce_href="#">变更管理</a></li> <li><a href="#" mce_href="#">结算管理</a></li> <li><a href="#" mce_href="#">进度管理</a></li> <li><a href="#" mce_href="#">安全管理</a></li> <li><a href="#" mce_href="#">质量管理</a></li> <li><a href="#" mce_href="#">档案管理</a></li> </ul> </li> <li><a href="#" mce_href="#">合约科</a> <ul> <li><a href="#" mce_href="#">变更管理</a></li> <li><a href="#" mce_href="#">计量管理</a></li> <li><a href="#" mce_href="#">结算管理</a></li> <li><a href="#" mce_href="#">档案管理</a></li> <li><a href="#" mce_href="#">合同管理</a></li> </ul> </li> <li><a href="#" mce_href="#">帮 助</a></li> </ul> </div> </div> <div class="mainframe"> <table class="mytable" border=1> <caption><h4>2010 年 报 表</h4></caption> <?php for($row = 0; $row < 20; $row++) { if(($row%2) != 0) echo "<tr class=/"bluerow/">"; else echo "<tr>"; for($col = 0; $col < 9; $col++) echo "<td>000".$col."000</td>"; echo "</tr>"; } ?> </table> </div> <div id="copyright"> Tel: 00 86 1371 5532 362EMail: [email protected]: [email protected]<br> Copyrights © 2011, Yavobo. All rights reserved. </div> </body> </html>
样式表文件：
*{ margin: 0; /* Set the margin to 0, so there isn't space on left and right's side. */ padding: 0; /* Set the padding to 0, so there isn't space on left and right's side. */ } body{ margin: 0; font: 12px/20px tahoma Simsun Arial; color: #fff; text-align: center; } a{ color: yellow; text-decoration: none; } /**************************************************************/ /* For menu bar ...*/ /**************************************************************/ #topmenu { width: 100%; height: 29px; margin: auto auto; position: fixed; background-image:url(item.jpg); background-position: left bottom; background-repeat: repeat-x; border-right: solid 1px #ccc; border-bottom:solid 1px #ccc; overflow: visible; /* 此句是为了在IE下，当DIV的数据溢出时子菜单能够显示，在Firefox中无此句也能显示*/ /*注意：同时与下面的透明特性使用时IE中也不显示子菜单。 */ /* background-color: rgb(125,0,125);* / color: red; filter: alpha(opacity=90); /* The opacity for IE. * / opacity: 0.9; /* The opacity for Firefox. */ _position: absolute; _top: expression(eval(document.documentElement.scrollTop)); z-index: 1000; top: 0; } ul{ margin: 0 auto; padding: 0px; background-color: rgb(125,0,125); background-image: url(shadow.jpg); background-repeat: repeat-x; } ul li{ float: left; display: inline; font: 1.1em Arial, Helvetica, sans-serif; height: 24px; width: 100px; list-style: none; z-index: 1000; } ul li a{ color: black; text-decoration: none; line-height: 29px; width: 91px; margin: 0px; padding: 0px 0px 0px 8px; display: block; border-right: solid 1px #ccc; border-bottom:solid 1px #ccc; background-image: url("item.jpg"); /* #808080; */ background-repeat: repeat-x; } ul li a:hover{/* 让当前的菜单项与其它的区别开来。 */ color: red; background-image: url("hover.jpg"); /* #808080; */ background-repeat: repeat-x; } ul li ul li{height:25px;} ul li ul li a{ background: #808080; line-height:24px; } ul li ul{ visibility: hidden; /* 一般情况下下拉式子菜单是不可见的，故设为hidden。*/ } ul li:hover ul{ visibility: visible; /*在鼠标经过时让其可见，就像弹出式一样。*/ z-index:1000; } /**************************************************************/ /* End of menu bar define.*/ /**************************************************************/ .mytable { border:1px solid #ADC2DD; padding:0; border-collapse:collapse; margin: 0 auto; color: blue; } .mytable caption { text-align:center; border-left:1px solid #ADC2DD; border-right:1px solid #ADC2DD; border-top:1px solid #ADC2DD; background-color:#E7F0F9; } .mytable td { padding: 2px 5px; border-right:1px solid #ADC2DD; border-bottom:1px solid #ADC2DD; } .mytable .mytd-right { border-right:0px solid #adc2dd; } .mytable .mytd-bottom { border-bottom:none; } .mytable .mytd-right-bottom { border-bottom:none; border-right:none; } .bluerow { background-color: rgb(251,215,231); } #copyright{ background-color: rgb(125,125,125); border-top: 1px solid rgb(125,125,125); border-bottom: 1px solid #aaa; width: 100%; height: 36px; padding-top: 5px; padding-bottom: 5px; text-align: center; font-size: 14px; vertical-align: middle; } .mainframe { color: red; padding-top: 40px; float: both; width: 100%; margin: 5px auto; z-index: 0; }
运行截屏：
注意一点：
在DIV内的内容，当内容的高度超出div容器的高度时，在IE中不会显示，这时要设overflow属性的值为visible，子菜单才会显示。
参见CSS代码中的说明。
另外，透明(filter: alpha(opacity=90);和opacity:0.9;)的特性在与overflow同时运行时，在IE中子菜单也不能显示，这个要注意。