在一些門戶網(wǎng)站上，由于項目眾多，不可能全部將這些項目顯示在主導(dǎo)航上，就可以通過二級菜單，三級導(dǎo)航，甚至四級導(dǎo)航來顯示。

如何在自己做網(wǎng)站時，制作三級菜單，四級菜單呢，完全可以通過DIV+CSS的方式去制作，只需簡單三步就可以制作出完美的網(wǎng)站三級，四級導(dǎo)航菜單。

方法/步驟

1. 首先將以下的CSS樣式，復(fù)制到自己網(wǎng)站的CSS文件中，放在最下放。
   /*四級菜單導(dǎo)航CSS*/
   ul{padding:0px;}
   .menu{
   position:relative;
   width:960px;
   height:40px;
   background-color:#fff;
   margin-top:5px;
   margin-bottom:5px;
   }
   .menu ul{list-style-type:none;}
   .menu li{float:left;position:relative;width:91px;text-align:center;margin-left:5px;}
   .menu ul ul{
   visibility:hidden;
   position:absolute;
   left:3px;
   top:40px;
   }
   .menu ul ul ul{visibility:hidden;position:absolute;left:122px;top:0px;}
   .menu table{position:absolute;top:0;left:0;}
   .menu ul li:hover ul,.menu ul a:hover ul{visibility:visible;}
   .menu a{display:block;background:#46537C;padding:2px 10px;color:#fff;text-decoration:none;border:1px solid #46537C;height:35px;line-height:35px;}
   .menu a:hover{
   color:#fff;
   background-color: #F00;
   }
   .menu ul ul li{clear:both;text-align:left;margin-top:2px;}
   .menu ul ul li a{display:block;width:100px;height:15px;height:35px;}
   .menu ul ul li a:hover{background: #F00;}
   .menu ul ul ul li a{clear:both;text-align:left;}
   .menu ul li:hover ul{visibility:visible;}
   .menu ul a:hover ul{
   visibility:visible;
   /*一級的li，a的hover時，設(shè)置二級菜單可見*/
   }
   .menu ul :hover ul ul{
   visibility:hidden;
   /*一級的li，a的hover時，設(shè)置二級,三級菜單隱藏*/
   }
   .menu ul :hover ul :hover ul ul{
   visibility:hidden;
   /*一級和二級的li，a的hover時，設(shè)置三級和四級級菜單隱藏*/
   }
   .menu ul :hover ul :hover ul{
   visibility:visible;
   /*一級二級菜單hover時，設(shè)定3級菜單可見*/
   }
   .menu ul :hover ul :hover ul :hover ul{
   visibility:visible
   /*一級二級三級hover時，設(shè)置四級菜單可見*/
   }
   .menu ul ul ul a{background:#46537C;}
   .menu ul ul ul a:hover{background:#F00;}
   .menu ul ul ul ul a{background:#46537C;}
   .menu ul ul ul ul a:hover{background: #F00;}
2. 在需要顯示網(wǎng)站菜單的地方，放置以下的HTML代碼：
   <div class="menu">
   <ul>
   <li><a href="<?php echo get_option('home'); ?>">網(wǎng)站首頁</a></li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">論壇介紹
   <!--[if IE 7]><!--></a><!--<![endif]-->
   <!--[if lte IE 6]><table><tr><td><![endif]-->
   <ul>
   <!--三級子菜單-->
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">論壇簡介</a></li>
   <!--三級結(jié)束-->
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">計師介紹</a></li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">視頻新聞</a></li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">上級要聞</a></li>
   </ul>
   </li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">學(xué)校概況
   <!--[if IE 7]><!--></a><!--<![endif]-->
   <!--[if lte IE 6]><table><tr><td><![endif]-->
   <ul>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">學(xué)校簡介</a></li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">領(lǐng)導(dǎo)班子</a></li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">學(xué)校榮譽</a></li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">教師榮譽</a></li>
   </ul>
   <!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">校務(wù)公開
   <!--[if IE 7]><!--></a><!--<![endif]-->
   <!--[if lte IE 6]><table><tr><td><![endif]-->
   <ul>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">工作計劃</a></li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">部門計劃</a></li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">立章建制</a></li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">班規(guī)班約</a></li>
   </ul>
   <!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">教學(xué)科研
   <!--[if IE 7]><!--></a><!--<![endif]-->
   <!--[if lte IE 6]><table><tr><td><![endif]-->
   <ul>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">教學(xué)沙龍</a></li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">教學(xué)爭鋒</a></li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">課題研究</a></li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">教研論文</a></li>
   </ul>
   <!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">資源共享
   <!--[if IE 7]><!--></a><!--<![endif]-->
   <!--[if lte IE 6]><table><tr><td><![endif]-->
   <ul>
   <!--三級子菜單-->
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">實用案例
   <!--[if IE 7]><!--></a><!--<![endif]-->
   <!--[if lte IE 6]><table><tr><td><![endif]-->
   <ul>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">語文</a></li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">數(shù)學(xué)</a></li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">英語</a></li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">科學(xué)</a></li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">音體美</a></li>
   </ul>
   <!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
   <!--三級結(jié)束--><li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">套餐教案
   <!--[if IE 7]><!--></a><!--<![endif]-->
   <!--[if lte IE 6]><table><tr><td><![endif]-->
   <ul>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">語文
   <!--四級菜單開始-->
   <!--[if IE 7]><!--></a><!--<![endif]-->
   <!--[if lte IE 6]><table><tr><td><![endif]-->
   <ul>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">一年級</a></li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">二年級</a></li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">三年級</a></li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">四年級</a></li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">五年級</a></li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">六年級</a></li>
   </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">數(shù)學(xué)
   <!--四級菜單開始-->
   <!--[if IE 7]><!--></a><!--<![endif]-->
   <!--[if lte IE 6]><table><tr><td><![endif]-->
   <ul>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">一年級</a></li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">二年級</a></li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">三年級</a></li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">四年級</a></li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">五年級</a></li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">六年級</a></li>
   </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">英語
   <!--四級菜單開始-->
   <!--[if IE 7]><!--></a><!--<![endif]-->
   <!--[if lte IE 6]><table><tr><td><![endif]-->
   <ul>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">一年級</a></li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">二年級</a></li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">三年級</a></li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">四年級</a></li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">五年級</a></li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">六年級</a></li>
   </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">科學(xué)
   <!--四級菜單開始-->
   <!--[if IE 7]><!--></a><!--<![endif]-->
   <!--[if lte IE 6]><table><tr><td><![endif]-->
   <ul>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">一年級</a></li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">二年級</a></li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">三年級</a></li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">四年級</a></li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">五年級</a></li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">六年級</a></li>
   </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">音體美
   <!--四級菜單開始-->
   <!--[if IE 7]><!--></a><!--<![endif]-->
   <!--[if lte IE 6]><table><tr><td><![endif]-->
   <ul>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">一年級</a></li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">二年級</a></li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">三年級</a></li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">四年級</a></li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">五年級</a></li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">六年級</a></li>
   </ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
   <!--四級子菜單結(jié)束-->
   </ul>
   <!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">特色課件
   <!--[if IE 7]><!--></a><!--<![endif]-->
   <!--[if lte IE 6]><table><tr><td><![endif]-->
   <ul>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">語文</a></li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">數(shù)學(xué)</a></li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">英語</a></li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">科學(xué)</a></li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">音體美</a></li>
   </ul>
   <!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li><li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">軟件下載</a>
   </ul>
   </li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">黨務(wù)工會
   <!--[if IE 7]><!--></a><!--<![endif]-->
   <!--[if lte IE 6]><table><tr><td><![endif]-->
   <ul>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">支部活動</a></li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">職工論壇</a></li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">名校工程</a></li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">名師工程</a></li>
   </ul>
   <!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
   <!--結(jié)束--><li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">陽光少年
   <!--[if IE 7]><!--></a><!--<![endif]-->
   <!--[if lte IE 6]><table><tr><td><![endif]-->
   <ul>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">德育專題</a></li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">班隊活動</a></li>
   <!--三級子菜單-->
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">墨香文學(xué)
   <!--[if IE 7]><!--></a><!--<![endif]-->
   <!--[if lte IE 6]><table><tr><td><![endif]-->
   <ul>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">三年級</a></li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">四年級</a></li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">五年級</a></li>
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">六年級</a><!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
   <!--四級子菜單結(jié)束-->
   </ul>
   <!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
   <!--三級結(jié)束-->
   <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">龍虎榜單</a></li>
   </ul>
   </li><li><a href="<?php echo get_option('home'); ?>">一周進程</a></li>
   <li><a href="<?php echo get_option('home'); ?>">招聘招生</a></li>
   </ul>
   </div>
3. 通過修改代碼中的文字成為自己網(wǎng)站需要的導(dǎo)航名稱即可。

以上是通過固定的代碼來制作網(wǎng)站的三級、四級菜單，我們也可以使用動態(tài)調(diào)用的方式來制作網(wǎng)站三級、四級下拉菜單。方法見【wordpress下拉菜單制作】。

類似功能

• DEDECMS織夢網(wǎng)站下拉菜單導(dǎo)航的制作(實測可用)
  (118977 次閱讀)
• 如何制作網(wǎng)站導(dǎo)航的二級菜單
  (110342 次閱讀)
• wordpress制作符合Bootstrap的導(dǎo)航欄菜單（帶二級菜單）
  (11934 次閱讀)
• 網(wǎng)站下拉菜單怎么做
  (15020 次閱讀)

標(biāo)簽： isp 代碼 制作網(wǎng)站

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。