網(wǎng)站制作之最簡(jiǎn)單的下拉菜單代碼
一般下拉菜單都是JS實(shí)現(xiàn)的,但代碼太多,如果多個(gè)項(xiàng)目下拉那改動(dòng)就太煩瑣了,像這樣的懶人可是受罪。自己寫了段直接用DIV層實(shí)現(xiàn)的下拉菜單,很簡(jiǎn)單根本無(wú)技術(shù)含量,菜單下拉的具體位置自己慢慢細(xì)調(diào),以下是最簡(jiǎn)單的鼠標(biāo)經(jīng)過(guò)出現(xiàn)下拉菜單的代碼:
<table><tr><Td><div Onmouseout="pro.style.visibility='hidden'" Onmouseover="pro.style.visibility='visible'">
<div align="center" style="visibility:visible"><a href="products.asp">產(chǎn)品展示</a></div>
<div id="pro" style="position:absolute;visibility:hidden; margin-top:0px;">
<table width="105" bgcolor="#64A0E8">
<tr><td height="5" align="left"></td></tr>
<tr><td height="20" align="left"><a href="#">產(chǎn)品分類1</a></td></tr>
<tr><td height="20" align="left"><a href="#">產(chǎn)品分類2</a></td></tr>
<tr><td height="20" align="left"><a href="#">產(chǎn)品分類3</a></td></tr>
<tr><td height="20" align="left"><a href="#">產(chǎn)品分類4</a></td></tr>
</table></div>
</td></tr></table>
注意:記得把第一行代碼的那個(gè)O改成字母o啊,編輯器識(shí)別不了,哈哈。
下拉菜單層的那個(gè)margin-top:0px屬性不要改啊,否則你是得不到需要的那種效果滴。