CSS 實現(xiàn)4級的下拉菜單

2024-09-05 12:20:48

字體：大中小

供稿：網(wǎng)友

CSS實現(xiàn)的多級菜單，一共可下拉出4級，在編寫此類的CSS菜單時要注意，一級的li，a的hover時，設(shè)置二級菜單可見，一級的li，a的hover時，設(shè)置二級,三級菜單隱藏，一級和二級的li，a的hover時，設(shè)置三級和四級級菜單隱藏，一級二級菜單hover時，設(shè)定3級菜單可見，一級二級三級hover時，設(shè)置四級菜單可見，代碼里已加注了豐富的注釋，菜單風格如果不適合你口味的話，可自己美化一下。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>CSS 實現(xiàn)4級的下拉菜單</title></head><style></style><body><div   id="70qarhlowxag"   class="menu"><ul><li>公司首頁<ul><li>二級菜單_01</li><li>二級菜單_02</li></ul></li><li>公司簡介<ul><li>二級菜單_01</li><li>二級菜單_02</li></ul></li><li>產(chǎn)品導(dǎo)航<ul><li>二級菜單_01<li>二級菜單_02	<ul>	<li>三級菜單_01</li>	<li>三級菜單_02</li>	<li>三級菜單_03</li>	<li>三級菜單_04										<ul>			<li>四級菜單_01</li>			<li>四級菜單_02</li>			<li>四級菜單_03</li>			<li>四級菜單_04</li>			</ul>	</li>	</ul></li><li>二級菜單_03	<ul>	<li>三級菜單_01</li>	<li>三級菜單_02</li>	<li>三級菜單_03</li>	<li>三級菜單_04										<ul>			<li>四級菜單_01</li>			<li>四級菜單_02</li>			<li>四級菜單_03</li>			<li>四級菜單_04</li>			</ul>	</li>	</ul></li></ul></body></html>

上一篇：具有動畫效果的側(cè)邊折疊菜單

下一篇：JS版無限級網(wǎng)頁折疊菜單，類似于樹形菜單