一直覺得各種瀏覽器的一些二級(jí)菜單的小內(nèi)容設(shè)計(jì)的特別到位，瀏覽整個(gè)網(wǎng)頁不費(fèi)事，然后各種小項(xiàng)目的具體內(nèi)容還可以挨個(gè)展示，那么二級(jí)菜單的操作方法是什么呢？
這個(gè)是網(wǎng)頁的原圖，當(dāng)我鼠標(biāo)滑過移動(dòng)開發(fā)這一欄，后邊就出現(xiàn)了二級(jí)菜單。今天就給大家展示一下具體的操作方法。
給大家來一個(gè)版：
二級(jí)菜單.png
首先先把主菜單的樣式做出來：
做一個(gè)盒子：
<div class="menu">
<ul>
<li>移動(dòng)開發(fā)</li>
<li>前端開發(fā) </li>
<li>后端開發(fā)</li>
<li>基礎(chǔ)知識(shí)</li>
<li>云計(jì)算&大數(shù)據(jù) </li>
<li>智能硬件&物聯(lián)網(wǎng)</li>
<li>數(shù)據(jù)庫 </li>
<li>認(rèn)證考試 </li>
<li>企業(yè) IT</li>
<li>這幾&產(chǎn)品&測(cè)試</li>
</ul>
</div>
下圖是css里的樣式
.menu{
width: 210px;
height: 391px;
background:white;
border: 1px solid #eeeeee;
}
li{
list-style: none;
height: 38px;
line-height: 38px;
font-size: 15px;
border: 1px solid #eeeeee;
}
然后二級(jí)菜單在每個(gè)li后邊做出來
<div class="menu">
<ul>
<li>移動(dòng)開發(fā)
<div class="a1"></div>
<div class="submenu">
<p>移動(dòng)開發(fā)</p>
<dl>
<dt>android IOS</dt>
<dd>移動(dòng)開發(fā)</dd>
</dl>
<dl>
<dt>android IOS</dt>
<dd>移動(dòng)開發(fā)</dd>
</dl>
<dl>
<dt>android IOS</dt>
<dd>移動(dòng)開發(fā)</dd>
</dl>
</div>
</li>
<li>前端開發(fā)
<div class="a1"></div>
<div class="submenu">
<p>前端開發(fā)</p>
<dl>
<dt>android IOS</dt>
<dd>前端開發(fā)</dd>
</dl>
<dl>
<dt>android IOS</dt>
<dd>前端開發(fā)</dd>
</dl>
<dl>
<dt>android IOS</dt>
<dd>前端開發(fā)</dd>
</dl>
</div>
</li>
<li>后端開發(fā)
<div class="a1"></div>
<div class="submenu">
<p>后端開發(fā)</p>
<dl>
<dt>android IOS</dt>
<dd>后端開發(fā)</dd>
</dl>
<dl>
<dt>android IOS</dt>
<dd>后端開發(fā)</dd>
</dl>
<dl>
<dt>android IOS</dt>
<dd>后端開發(fā)</dd>
</dl>
</div>
</li>
<li>基礎(chǔ)知識(shí)
<div class="a1"></div>
<div class="submenu">
<p>基礎(chǔ)知識(shí)</p>
<dl>
<dt>android IOS</dt>
<dd>基礎(chǔ)知識(shí)</dd>
</dl>
<dl>
<dt>android IOS</dt>
<dd>基礎(chǔ)知識(shí)</dd>
</dl>
<dl>
<dt>android IOS</dt>
<dd>基礎(chǔ)知識(shí)</dd>
</dl>
</div>
</li>
<li>云計(jì)算&大數(shù)據(jù)
<div class="a1"></div>
<div class="submenu">
<p>云計(jì)算</p>
<dl>
<dt>android IOS</dt>
<dd>云計(jì)算</dd>
</dl>
<dl>
<dt>android IOS</dt>
<dd>云計(jì)算</dd>
</dl>
<dl>
<dt>android IOS</dt>
<dd>云計(jì)算</dd>
</dl>
</div>
</li>
<li>智能硬件&物聯(lián)網(wǎng)
<div class="a1"></div>
<div class="submenu">
<p>智能硬件</p>
<dl>
<dt>android IOS</dt>
<dd>智能硬件</dd>
</dl>
<dl>
<dt>android IOS</dt>
<dd>智能硬件</dd>
</dl>
<dl>
<dt>android IOS</dt>
<dd>智能硬件</dd>
</dl>
</div>
</li>
<li>數(shù)據(jù)庫
<div class="a1"></div>
<div class="submenu">
<p>數(shù)據(jù)庫</p>
<dl>
<dt>android IOS</dt>
<dd>數(shù)據(jù)庫</dd>
</dl>
<dl>
<dt>android IOS</dt>
<dd>數(shù)據(jù)庫</dd>
</dl>
<dl>
<dt>android IOS</dt>
<dd>數(shù)據(jù)庫</dd>
</dl>
</div>
</li>
<li>認(rèn)證考試
<div class="a1"></div>
<div class="submenu">
<p>認(rèn)證考試</p>
<dl>
<dt>android IOS</dt>
<dd>認(rèn)證考試</dd>
</dl>
<dl>
<dt>android IOS</dt>
<dd>認(rèn)證考試</dd>
</dl>
<dl>
<dt>android IOS</dt>
<dd>認(rèn)證考試</dd>
</dl>
</div>
</li>
<li>企業(yè) IT
<div class="a1"></div>
<div class="submenu">
<p>企業(yè)</p>
<dl>
<dt>android IOS</dt>
<dd>企業(yè)</dd>
</dl>
<dl>
<dt>android IOS</dt>
<dd>企業(yè)</dd>
</dl>
<dl>
<dt>android IOS</dt>
<dd>企業(yè)</dd>
</dl>
</div>
</li>
<li>這幾&產(chǎn)品&測(cè)試
<div class="a1"></div>
<div class="submenu">
<p>移動(dòng)開發(fā)</p>
<dl>
<dt>android IOS</dt>
<dd>移動(dòng)開發(fā)</dd>
</dl>
<dl>
<dt>android IOS</dt>
<dd>移動(dòng)開發(fā)</dd>
</dl>
<dl>
<dt>android IOS</dt>
<dd>移動(dòng)開發(fā)</dd>
</dl>
</div>
</li>
</ul>
</div>
加上樣式：
.submenu{
width: 210px;
height: 391px;
background: white;
position: absolute;
top: 0px;
left: 210px;
display: none;
border: 1px solid #eeeeee;
}
最后一步加上定位（position），設(shè)好滑動(dòng)顯示（hover）：
注意二級(jí)菜單的絕對(duì)定位我已經(jīng)在上邊加上了
.menu ul{
position: relative;
}
li:hover .submenu{
display: block;
}
二級(jí).jpg
二級(jí)1.jpg
小露身手，如有失誤，恭候點(diǎn)評(píng)，感謝閱讀！
