網(wǎng)站三級(jí)、四級(jí)下拉菜單的制作方法（附代碼）
2018-11-01 來(lái)源：學(xué)做網(wǎng)站論壇
在一些門戶網(wǎng)站上，由于項(xiàng)目眾多，不可能全部將這些項(xiàng)目顯示在主導(dǎo)航上，就可以通過(guò)二級(jí)菜單，三級(jí)導(dǎo)航，甚至四級(jí)導(dǎo)航來(lái)顯示。
如何在自己做網(wǎng)站時(shí)，制作三級(jí)菜單，四級(jí)菜單呢，完全可以通過(guò)DIV+CSS的方式去制作，只需簡(jiǎn)單三步就可以制作出完美的網(wǎng)站三級(jí)，四級(jí)導(dǎo)航菜單。
方法/步驟
- 首先將以下的CSS樣式，復(fù)制到自己網(wǎng)站的CSS文件中，放在最下放。
/*四級(jí)菜單導(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;
/*一級(jí)的li，a的hover時(shí)，設(shè)置二級(jí)菜單可見(jiàn)*/
}
.menu ul :hover ul ul{
visibility:hidden;
/*一級(jí)的li，a的hover時(shí)，設(shè)置二級(jí),三級(jí)菜單隱藏*/
}
.menu ul :hover ul :hover ul ul{
visibility:hidden;
/*一級(jí)和二級(jí)的li，a的hover時(shí)，設(shè)置三級(jí)和四級(jí)級(jí)菜單隱藏*/
}
.menu ul :hover ul :hover ul{
visibility:visible;
/*一級(jí)二級(jí)菜單hover時(shí)，設(shè)定3級(jí)菜單可見(jiàn)*/
}
.menu ul :hover ul :hover ul :hover ul{
visibility:visible
/*一級(jí)二級(jí)三級(jí)hover時(shí)，設(shè)置四級(jí)菜單可見(jiàn)*/
}
.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;} - 在需要顯示網(wǎng)站菜單的地方，放置以下的HTML代碼：
<div class="menu">
<ul>
<li><a href="<?php echo get_option('home'); ?>">網(wǎng)站首頁(yè)</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>
<!--三級(jí)子菜單-->
<li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">論壇簡(jiǎn)介</a></li>
<!--三級(jí)結(jié)束-->
<li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">計(jì)師介紹</a></li>
<li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">視頻新聞</a></li>
<li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">上級(jí)要聞</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é)校簡(jiǎn)介</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é)校榮譽(yù)</a></li>
<li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">教師榮譽(yù)</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">校務(wù)公開(kāi)
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">工作計(jì)劃</a></li>
<li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">部門計(jì)劃</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é)爭(zhēng)鋒</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>
<!--三級(jí)子菜單-->
<li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">實(shí)用案例
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">語(yǔ)文</a></li>
<li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">數(shù)學(xué)</a></li>
<li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">英語(yǔ)</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>
<!--三級(jí)結(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="#">語(yǔ)文
<!--四級(jí)菜單開(kāi)始-->
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">一年級(jí)</a></li>
<li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">二年級(jí)</a></li>
<li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">三年級(jí)</a></li>
<li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">四年級(jí)</a></li>
<li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">五年級(jí)</a></li>
<li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">六年級(jí)</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">數(shù)學(xué)
<!--四級(jí)菜單開(kāi)始-->
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">一年級(jí)</a></li>
<li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">二年級(jí)</a></li>
<li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">三年級(jí)</a></li>
<li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">四年級(jí)</a></li>
<li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">五年級(jí)</a></li>
<li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">六年級(jí)</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">英語(yǔ)
<!--四級(jí)菜單開(kāi)始-->
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">一年級(jí)</a></li>
<li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">二年級(jí)</a></li>
<li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">三年級(jí)</a></li>
<li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">四年級(jí)</a></li>
<li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">五年級(jí)</a></li>
<li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">六年級(jí)</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">科學(xué)
<!--四級(jí)菜單開(kāi)始-->
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">一年級(jí)</a></li>
<li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">二年級(jí)</a></li>
<li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">三年級(jí)</a></li>
<li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">四年級(jí)</a></li>
<li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">五年級(jí)</a></li>
<li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">六年級(jí)</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">音體美
<!--四級(jí)菜單開(kāi)始-->
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">一年級(jí)</a></li>
<li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">二年級(jí)</a></li>
<li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">三年級(jí)</a></li>
<li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">四年級(jí)</a></li>
<li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">五年級(jí)</a></li>
<li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">六年級(jí)</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<!--四級(jí)子菜單結(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="#">語(yǔ)文</a></li>
<li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">數(shù)學(xué)</a></li>
<li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">英語(yǔ)</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ù)工會(huì)
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">支部活動(dòng)</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="#">陽(yáng)光少年
<!--[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="#">班隊(duì)活動(dòng)</a></li>
<!--三級(jí)子菜單-->
<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="#">三年級(jí)</a></li>
<li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">四年級(jí)</a></li>
<li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">五年級(jí)</a></li>
<li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">六年級(jí)</a><!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<!--四級(jí)子菜單結(jié)束-->
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!--三級(jí)結(jié)束-->
<li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">龍虎榜單</a></li>
</ul>
</li><li><a href="<?php echo get_option('home'); ?>">一周進(jìn)程</a></li>
<li><a href="<?php echo get_option('home'); ?>">招聘招生</a></li>
</ul>
</div> - 通過(guò)修改代碼中的文字成為自己網(wǎng)站需要的導(dǎo)航名稱即可。
以上是通過(guò)固定的代碼來(lái)制作網(wǎng)站的三級(jí)、四級(jí)菜單，我們也可以使用動(dòng)態(tài)調(diào)用的方式來(lái)制作網(wǎng)站三級(jí)、四級(jí)下拉菜單。方法見(jiàn)【wordpress下拉菜單制作】。
類似功能
- DEDECMS織夢(mèng)網(wǎng)站下拉菜單導(dǎo)航的制作(實(shí)測(cè)可用)
(118977 次閱讀) - 如何制作網(wǎng)站導(dǎo)航的二級(jí)菜單
(110342 次閱讀) - wordpress制作符合Bootstrap的導(dǎo)航欄菜單（帶二級(jí)菜單）
(11934 次閱讀) - 網(wǎng)站下拉菜單怎么做
(15020 次閱讀)
標(biāo)簽： isp 代碼 制作網(wǎng)站
版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。
最新資訊
熱門推薦