要實現(xiàn)的目標，點擊一行中的一個分類時，展開對應的子列表，該功能多用于網(wǎng)頁的導航，電商的分類購物集合。

第一步：寫html結構

<div id="con">
? ? ? ? ?<ul>
? ? ? ? ? ? <li id="li01">
? ? ? ? ? ? ? ?<a href="javascript:;">平面設計</a>
? ? ? ? ? ? ? ? ?<ul id="ul01">
? ? ? ? ? ? ? ? ? ?<li><a href="javascript:;">平面內容</a></li>
? ? ? ? ? ? ? ? ? ?<li><a href="javascript:;">平面內容</a></li> ? ? ? ? ? ? ? ??

? ? ? ? ? ? ? ? ? ?<li><a href="javascript:;">平面構成</a></li> ? ? ? ? ? ? ? ??

? ? ? ? ? ? ? ? ? ?<li><a href="javascript:;">平面色彩</a></li> ? ? ? ? ? ? ?? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ?</ul>
? ? ? ? ? ? </li>
? ? ? ? ? ? <li id="li02">
? ? ? ? ? ? ? ?<a href="javascript:;">組織架構</a>
? ? ? ? ? ? ? ?<ul id="ul02">
? ? ? ? ? ? ? ? ? <li><a href="javascript:;">十面埋伏</a></li>
? ? ? ? ? ? ? ? ? <li><a href="javascript:;">雪中送炭</a></li> ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ?<li><a href="javascript:;">一丘之貉</a></li> ? ? ? ? ? ? ? ??

? ? ? ? ? ? ? ? ?<li><a href="javascript:;">望穿秋水</a></li> ? ? ? ? ? ? ?? ? ? ? ? ? ? ?

? ? ? ? ? ? ?</ul>
? ? ? ? ? ? </li>
? ? ? ? ? ? ?<li id="li03">
? ? ? ? ? ? ? ?<a href="javascript:;">得隴望蜀</a>
? ? ? ? ? ? ? ?<ul id="ul03">
? ? ? ? ? ? ? ? ? <li><a href="javascript:;">一馬平川</a></li>
? ? ? ? ? ? ? ? ? <li><a href="javascript:;">水中望月</a></li> ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? <li><a href="javascript:;">暗度陳倉</a></li> ? ? ? ? ? ? ? ??

? ? ? ? ? ? ? ? ? ?<li><a href="javascript:;">十月懷胎</a></li> ? ? ? ? ? ? ?? ? ? ? ? ? ??

? ? ? ? ? ? ? </ul>
? ? ? ? ? ? </li> ? ? ? ? ??
? ? ? ? ? ? ?<li id="li04">
? ? ? ? ? ? ? ?<a href="javascript:;">金色年華</a>
? ? ? ? ? ? ? ?<ul id="ul04">
? ? ? ? ? ? ? ? ? <li><a href="javascript:;">得意人生</a></li>
? ? ? ? ? ? ? ? ? <li><a href="javascript:;">從一而終</a></li> ? ? ? ? ? ? ? ??

? ? ? ? ? ? ? ? ? <li><a href="javascript:;">不可造次</a></li> ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? <li><a href="javascript:;">好高騖遠</a></li> ? ? ? ? ? ? ?? ? ? ? ? ? ? ?

? ? ? ? ? ? ?</ul>
? ? ? ? ? ? </li> ? ? ? ? ??
? ? ? ? ?</ul>
? ? </div>

第二步：寫css樣式表

<style type="text/css">
?* {margin:0; padding: 0; list-style: none;} //全局格式清理
?#con {width: 400px; margin:100px auto; } //盒子寬度400px；外邊距100px，左右居中；
?#con ul li { float:left; width: 100px; height:30px ; line-height:30px; text-align:center;} //con 下ul 下li標簽左浮動，寬度100px，高度30px，行高30px，文字水平居中；
?#con a{text-decoration: none; color: #fff; display: block; width:100px; height:30px;background-color:#666; font-size:12px;} //盒子下的a標簽 文字下劃線：沒有；背景顏色：#fff，顯示狀態(tài)：塊級元素顯示；寬度：100px；高度：30px；背景色：#666;?
?#con a:hover { background-color: #0FF;} ?//盒子里面的a標簽，鼠標滑過時背景色變?yōu)?#xff1a;#0FF;
?#con ul ul { display:none;} //con盒子里面ul下的ul標簽，默認顯示狀態(tài)：不顯示；
</style>

第三步：寫代碼

<script type="text/javascript">
? function myul(par01,par02){
? var li01 =document.getElementById(par01);
? var ul01 =document.getElementById(par02);
? li01.onmousemove =function(){ul01.style.display ='block';};
? li01.onmouseout =function(){ul01.style.display ='none';};
? }
?myul('li01','ul01');
?myul('li02','ul02');
?myul('li03','ul03');
?myul('li04','ul04');
</script> ?//控制html的li下的子列表的隱藏與顯示狀態(tài)的切換。

成果：

默認狀態(tài)時

鼠標滑過時

總結

以上是生活随笔為你收集整理的原生js写网页下拉菜单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。