CSS三級菜單是網(wǎng)站導航中常見的一種形式,它可以在頁面上顯示出多級目錄結構,方便用戶快速找到所需的內(nèi)容。在使用CSS設置三級菜單時,需要注意以下幾個方面。
一、HTML結構
三級菜單的HTML結構如下所示,其中ul標簽嵌套使用li標簽,每個li標簽包含一個a標簽用于顯示菜單名稱,以及一個ul標簽用于顯示下一級菜單。需要注意的是,在第三級菜單中,需要添加一個class名稱用于區(qū)分所有第三級菜單。
<ul class="menu"> <li><a href="#">一級菜單1</a> <ul> <li><a href="#">二級菜單1</a> <ul> <li class="sub"><a href="#">三級菜單1</a></li> <li class="sub"><a href="#">三級菜單2</a></li> </ul> </li> <li><a href="#">二級菜單2</a></li> </ul> </li>二、CSS樣式 在CSS樣式中,需要添加以下幾條代碼。其中,display屬性用于控制下一級菜單的顯示與隱藏,而:hover偽類則用于在鼠標懸浮時顯示下一級菜單。
/* 一級菜單 */ .menu li { display: inline-block; position: relative; } /* 二級菜單 */ .menu ul { position: absolute; display: none; top: 100%; left: 0; } .menu ul li { display: block; } /* 三級菜單 */ .sub ul { left: 100%; top: 0; } /* 鼠標懸浮時顯示 */ .menu li:hover >ul { display: block; }三、完整代碼 最終的完整代碼如下所示。可以根據(jù)實際需要進行修改。
<style> /* 一級菜單 */ .menu li { display: inline-block; position: relative; } /* 二級菜單 */ .menu ul { position: absolute; display: none; top: 100%; left: 0; } .menu ul li { display: block; } /* 三級菜單 */ .sub ul { left: 100%; top: 0; } /* 鼠標懸浮時顯示 */ .menu li:hover >ul { display: block; } </style> <ul class="menu"> <li><a href="#">一級菜單1</a> <ul> <li><a href="#">二級菜單1</a> <ul> <li class="sub"><a href="#">三級菜單1</a></li> <li class="sub"><a href="#">三級菜單2</a></li> </ul> </li> <li><a href="#">二級菜單2</a></li> </ul> </li> </ul>以上就是CSS三級菜單的設置方法,需要注意HTML結構和CSS樣式的設置,以及鼠標懸浮時下一級菜單的顯示效果。
上一篇css三種定義的關系