色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css三級菜單怎么設置

林子帆2年前8瀏覽0評論
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樣式的設置,以及鼠標懸浮時下一級菜單的顯示效果。