一个简单的导航类弹出菜单!
给需要的人, 这只是一个简单的构架, 请使用者自行美化!!CSS部分<style>
.topmenu { margin:0px auto; width:420px; height:35px; border-left:1px #dddddd solid; }
.topmenu li { float:left; width:104px; height:35px; border-right:1px #dddddd solid; text-align:center; color:#575757; font-size:14px; line-height:35px; *line-height:37px; font-weight:bold; cursor:pointer; overflow:hidden;}
.topmenu a { color:#575757; }
.floatmenu { width:104px; margin:-26px 0px 0px -23px; *margin:-37px 0px 0px -19px; padding:0px 0px 4px; border:1px #dddddd solid; border-top:none; background:#f1f1f1; overflow:hidden; }
.floatmenu li { float:left; width:104px; height:24px; font-size:13px; line-height:24px; *line-height:26px; text-align:center; overflow:hidden; }
.floatmenu a { display:block; width:104px; line-height:24px; *line-height:26px; color:#575757; }
.floatmenu a:hover { background:#0099FF; text-decoration:none; color:#ffffff; }
.floatmenu li.mtop { height:35px; text-align:center; color:#222222; font-size:14px; line-height:35px; *line-height:37px; font-weight:bold; cursor:pointer; }
</style>HTML部分onmouseover 如改成 onclick (点击后弹出菜单)<div style=" height:35px; width:960px; margin:0px auto; background:#f3f3f3;"> <!--自己修改-->
<ul class="topmenu">
<li><a href="javascript:;" id="menu1" onmouseover="showMenu({'ctrlid':this.id})">快速通道</a></li>
<li><a href="javascript:;" id="menu2" onmouseover="showMenu({'ctrlid':this.id})">特色功能</a></li>
<li><a href="javascript:;" id="menu3" onmouseover="showMenu({'ctrlid':this.id})">快速发帖</a></li>
<li><a id="myprompt" href="notice.php" <!--{if $prompt}-->class="new" onmouseover="showMenu({'ctrlid':this.id})"<!--{/if}-->>社区秘书</a></li>
</ul>
</div>
<ul class="floatmenu" id="menu1_menu" style="display: none;">
<li class="mtop">快速通道</li>
<li><a href="http://www.ge6.net">格调社区</a></li>
<li><a href="http://www.ge6.net">格调社区</a></li>
<li><a href="http://www.ge6.net">格调社区</a></li>
<li><a href="http://www.ge6.net">格调社区</a></li>
<li><a href="http://www.ge6.net">格调社区</a></li>
<li><a href="http://www.ge6.net">格调社区</a></li>
<li><a href="http://www.ge6.net">格调社区</a></li>
</ul>
<ul class="floatmenu" id="menu2_menu" style="display: none;">
<li class="mtop">特色功能</li>
<li><a href="http://www.ge6.net">格调社区</a></li>
<li><a href="http://www.ge6.net">格调社区</a></li>
<li><a href="http://www.ge6.net">格调社区</a></li>
<li><a href="http://www.ge6.net">格调社区</a></li>
<li><a href="http://www.ge6.net">格调社区</a></li>
<li><a href="http://www.ge6.net">格调社区</a></li>
<li><a href="http://www.ge6.net">格调社区</a></li>
</ul>
<ul class="floatmenu" id="menu3_menu" style="display: none;">
<li class="mtop">快速发帖</li>
<li><a href="http://www.ge6.net">格调社区</a></li>
<li><a href="http://www.ge6.net">格调社区</a></li>
<li><a href="http://www.ge6.net">格调社区</a></li>
<li><a href="http://www.ge6.net">格调社区</a></li>
<li><a href="http://www.ge6.net">格调社区</a></li>
<li><a href="http://www.ge6.net">格调社区</a></li>
<li><a href="http://www.ge6.net">格调社区</a></li>
</ul>
页:
[1]