滑鼠經過顯示下拉選單

fsrloveless發表於2018-05-04

純CSS實現之簡陋版

原理：通過無序列表實現一二級選單，二級選單display預設值為none；當滑鼠經過時，二級選單display值變為block。

<!DOCTYPE html>

<html>
<head>
<title>滑鼠經過顯示下拉選單</title>
<style type="text/css">
.firstLevel {
list-style: none;
}
.secondLevel {
display: none;
}
#first1:hover ul, #first2:hover ul, #first3:hover ul {
display: block;
}
</style>
</head>
<body>
<ul class="firstLevel">
<li id="first1">女裝 
<ul class="secondLevel">
<li>羽絨服</li>
<li>連衣裙</li>
<li>褲裝</li>
</ul></li>
<li id="first2">家電
    <ul class="secondLevel">
<li>洗衣機</li>
<li>電冰箱</li>
<li>熱水器</li>
</ul></li>
</li>
<li id="first3">珠寶
    <ul class="secondLevel">
<li>項鍊</li>
<li>手鐲</li>
<li>戒指</li>
</ul></li>
</li>
</ul>
</body>
</html>

相關文章