CSS無限級菜單是Web開發中經常用到的一個技術，可以幫助我們實現網站導航菜單更加美觀、精致。通過CSS設計，我們可以輕松地實現垂直或水平無限級菜單結構，使得網站菜單變得更加清晰易用。

/*HTML代碼*/
<ul id="menu">
<li>
<a href="#">一級菜單</a>
<ul>
<li><a href="#">二級菜單</a></li>
<li>
<a href="#">二級菜單</a>
<ul>
<li><a href="#">三級菜單</a></li>
<li><a href="#">三級菜單</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">一級菜單</a></li>
<li><a href="#">一級菜單</a></li>
</ul>
/*CSS代碼*/
#menu {
margin:0;
padding:0;
list-style:none;
background:#f2f2f2;
}
#menu li {
position:relative;
float:left;
background:#f2f2f2;
border-right:1px solid #ccc;
}
#menu li a {
display:block;
padding:0 10px;
color:#333;
font-size:14px;
line-height:40px;
text-decoration:none;
}
#menu li:hover {
background:#fff;
}
#menu li:hover > ul {
display:block;
}
ul {
display:none;
position:absolute;
top:40px;
left:0;
margin:0;
padding:0;
list-style:none;
background:#fff;
}
ul ul {
top:0;
left:100%;
background:#f2f2f2;
}
ul li {
float:none;
position:relative;
border-top:1px solid #ccc;
border-right:none;
border-bottom:none;
border-left:none;
}
ul li a {
padding:10px;
color:#333;
font-size:12px;
}
ul li a:hover {
background:#f2f2f2;
}

上面是一段無限級菜單的代碼，我們首先使用

和
• 標簽來構建菜單結構。通過CSS樣式設計，我們將菜單項以及子菜單項的排列和樣式進行了調整，實現了菜單的無限極展示效果。

  上述代碼中，我們可以看到CSS樣式中通過hover偽類來控制子菜單的展示。當鼠標懸停在一級菜單上時，子菜單ul的display屬性被設置為block，實現菜單的展開效果。同時，我們也使用position:absolute來實現子菜單的絕對定位。

  當然，無限級菜單的設計并不僅限于這種垂直展示結構。我們還可以通過CSS樣式設置實現水平展示等其它菜單結構。只要掌握了相關的CSS樣式技能，就可以輕松地實現網站導航菜單的更多細節設計。