CSS 左側(cè)展開菜單樣式是一種在網(wǎng)頁設(shè)計中非常常見的布局方式，它能夠有效幫助網(wǎng)頁實現(xiàn)導(dǎo)航欄的功能，同時對用戶的操作也非常友好。下面我們就來看一下如何實現(xiàn) CSS 左側(cè)展開菜單樣式。

.navbar {
height: 100%;
width: 200px;
position: fixed;
top: 0;
left: 0;
background-color: #fff;
border-right: 1px solid #eee;
}
.navbar ul {
list-style: none;
margin-top: 20px;
padding-left: 10px;
}
.navbar ul li {
margin-bottom: 10px;
}
.navbar ul li a {
display: block;
color: #333;
text-decoration: none;
padding: 10px;
}
.navbar ul li a:hover {
background-color: #eee;
}
.navbar ul li ul {
display: none;
padding-left: 10px;
}
.navbar ul li:hover ul {
display: block;
}

代碼中的 .navbar 就是我們的左側(cè)展開菜單，通過設(shè)置其 position 屬性為 fixed，我們能夠?qū)崿F(xiàn)它的固定位置。通過設(shè)置其 width 和 height 屬性我們能夠把菜單的大小和高度進行調(diào)整。

菜單的具體內(nèi)容在代碼中則是由 ul 和 li 標簽實現(xiàn)的，通過 list-style 屬性我們能夠把其樣式變?yōu)榱斜順邮?。通過對 li 標簽進行 margin-bottom 屬性設(shè)置，我們能夠讓菜單列表之間有一定的距離。

通過設(shè)置 a 標簽的 display 屬性為 block，我們實現(xiàn)了標題和子菜單的分離效果，同時通過添加 hover 屬性，我們讓鼠標置于 a 標簽上時菜單高亮。

最后通過設(shè)置菜單的子菜單的 display 屬性為 none 實現(xiàn)子菜單在一開始處于隱藏狀態(tài)，而當(dāng)我們鼠標置于一級菜單上面時則通過設(shè)置 hover 屬性實現(xiàn)子菜單出現(xiàn)。

這樣，我們就可以通過代碼實現(xiàn) CSS 左側(cè)展開菜單樣式的效果了。