CSS中實現(xiàn)左側(cè)下拉菜單是一項很有用的技能。下面介紹一下如何使用CSS實現(xiàn)左側(cè)下拉菜單。

<ul class="menu">
<li>菜單1
<ul class="dropdown">
<li><a href="#">選項1</a></li>
<li><a href="#">選項2</a></li>
<li><a href="#">選項3</a></li>
</ul>
</li>
<li>菜單2</li>
</ul>//CSS代碼.menu {
list-style: none;
}
.menu >li {
padding: 10px;
background-color: #f5f5f5;
border-bottom: 1px solid #ddd;
position: relative;
}
.menu >li:hover {
background-color: #ccc;
}
.dropdown {
display: none;
position: absolute;
top: 100%;
left: 0;
z-index: 1;
padding: 0;
margin: 0;
list-style: none;
background-color: #fff;
border: 1px solid #ddd;
}
.dropdown li {
padding: 10px;
border-bottom: 1px solid #ddd;
}
.dropdown li:hover {
background-color: #ccc;
}
.menu >li:hover .dropdown {
display: block;
}

以上代碼會創(chuàng)建一個左側(cè)下拉菜單。當鼠標移動到一個菜單項時，下拉菜單會顯示出來。可以用這種方式實現(xiàn)任何數(shù)量的下拉菜單。