<style type="text/css">
#dlmenu {height:10em}
#menu {list-style-type:nonemargin:0 0 10pxpadding:0position:absolutewidth:15embackground:#fffz-index:100}
#menu li {display:blockpadding:0margin:0position:relativez-index:100}
#menu li a, #menu li a:visited {display:blocktext-decoration:none}
#menu li dd {display:none}
#menu li:hover, #menu li a:hover {border:0}
#menu li:hover dt a , #menu li a:hover dt a {background:#d4d8bd url(top_grad_2.gif) center centercolor:#ff0}
#menu li:hover dd, #menu li a:hover dd {display:block}
#menu li:hover dl, #menu li a:hover dl {height:20embackground:#b4be9c url(sub_grad.gif)}
#menu table {border-collapse:collapsepadding:0margin:-4pxfont-size:1em}
#menu dl {width: 15emmargin: 0background: #6f9c6fcursor:pointer}
#menu dt {margin:0padding: 0font-size: 1.1emborder-top:1px solid #cce}
#menu dd {margin:0padding:0font-size: 1emtext-align:left}
.gallery dt a, .gallery dt a:visited {display:blockcolor:#fffpadding:5px 5px 5px 10pxbackground:#949e7c url(top_grad.gif) center center}
.gallery dd a, .gallery dd a:visited {color:#000min-height:1emtext-decoration:nonedisplay:blockpadding:4px 5px 4px 20pxbackground:#b4be9c url(sub_grad.gif)}
* html .gallery dd a, * html .gallery dd a:visited {height:1em}
.gallery dd a:hover {background:#7aacolor:#ff0}
</style>
<div id="dlmenu">
<ul id="menu">
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="gallery">
<dt><a href="../menu/index.html">DEMOS</a></dt>
<dd><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></dd>
<dd><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></dd>
<dd><a href="../menu/form.html" title="Styling forms">styled form</a></dd>
<dd><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></dd>
<dd><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></dd>
<dd><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></dd>
<dd><a href="../menu/bodies.html" title="fun with background images">fun with backgrounds</a></dd>
<dd><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></dd>
1）、普通下拉列表菜单html代码如下：
<form action="" method="get">
<label>1、普通下拉列表菜单</label>
<select name="">
<option value="0">DIVCSS5</option>
<option value="1">DIVCSS5</option>
</select>
</form>
2）、跳转下拉列表菜单（如常见点击后跳转到选择网站）
常常一些网站做友情链接，与部门之间使用select下拉标签实现网址跳转。下面我们通过代码与案例接受select跳转菜单应用。
跳转菜单html代码如下：
<form action="" method="get">
<label>2、跳转的下拉列表菜单</label>
<select name="jumpMenu" id="jumpMenu"
onchange="MM_jumpMenu('parent',this,0)">
<option value="http://www.Rothur.com/">Rothur</option>
<option value="http://www.Rothur.com/">Rothur</option>
</select>
</form>
实现跳转还需要在head标签内加入Js脚本动作代码：
<script type="text/javascript"> <!-- function MM_jumpMenu(targ,selObj,restore){ //v3.0 eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'") if (restore) selObj.selectedIndex=0 } //--> </script>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）