CSS中的多層ul li可以讓網頁更加美觀和結構化。多層ul li的實現方法是通過定義多個嵌套的<ul>和<li>標簽, 并使用CSS樣式來控制它們的樣式和位置。
/*CSS樣式*/ ul { list-style:none; /*去除默認樣式,變成無序列表*/ margin:0; /*控制ul列表的位置*/ padding:0; } ul li { display:inline-block; /*將列表項變成inline-block,可以在一行顯示*/ position:relative; /*設定相對位置,可以控制子列表的顯示位置*/ margin-right:20px; /*控制列表項之間的距離*/ } ul ul { position:absolute; /*設定絕對位置*/ top:100%; /*將子列表放在父列表的下方*/ left:0; opacity:0; /*初始透明度為0*/ visibility:hidden; /*初始隱藏*/ -webkit-transition:opacity 0.3s ease, visibility 0.3s ease; /*給子列表添加過渡效果*/ -moz-transition:opacity 0.3s ease, visibility 0.3s ease; -o-transition:opacity 0.3s ease, visibility 0.3s ease; transition:opacity 0.3s ease, visibility 0.3s ease; } ul ul ul { left:100%; /*將第三層子列表放在第二層子列表的右邊*/ top:0; margin-left:20px; /*控制第三層子列表與第二層子列表之間的距離*/ } ul li:hover>ul { opacity:1; /*當鼠標懸浮在列表項上時,子列表呈現出來*/ visibility:visible; }
使用多層ul li可以創建垂直、水平和多級導航菜單,以及其他基于列表的布局。它是一種清晰明了、易于維護和擴展的頁面結構,同時也讓網頁更加美觀和易于用戶交互。