HTML部分：

?<dl class="shopclass_item">
????????????? <dt><a href="#" class="b">手機(jī)</a> <a href="#" class="b">數(shù)碼</a>? <a href="#" class="aLink">合約機(jī)</a></dt>
????????????? <dd><a href="#">榮耀3X</a> <a href="#">單反</a> <a href="#">智能設(shè)備</a></dd>
????????????? <div id="shopclass_list">
????????????? <div class="shopclass_cont">
?????????????? <dl id="shoplist_item">
???????????????? <dt>電腦整機(jī)</dt>
???????????????? <dd><a href="#">筆記本</a><a href="#">超極本</a><a href="#">上網(wǎng)本</a><a href="#">平板電腦</a><a href="#">臺(tái)式機(jī)</a></dd>
?????????????? </dl>
?????????????? <dl id="shoplist_item">
???????????????? <dt>裝機(jī)配件</dt>
???????????????? <dd><a href="#">CPU</a><a href="#">硬盤(pán)</a><a href="#">SSD固態(tài)硬盤(pán)</a><a href="#">內(nèi)存</a><a href="#">顯示</a><a href="#">器智能顯示器</a><a href="#">主板</a><a href="#">顯卡</a><a href="#">機(jī)箱</a><a href="#">電源</a><a href="#">散熱器</a><a href="#">刻錄機(jī)/光驅(qū)</a><a href="#">聲卡</a><a href="#">拓展卡</a><a href="#">服務(wù)器配件</a><a href="#">DIV小附件</a><a href="#">裝機(jī)/配件安裝</a></dd>
?????????????? </dl>
?????????????? <dl id="shoplist_item">
???????????????? <dt>整機(jī)附件</dt>
???????????????? <dd><a href="#">電腦包</a><a href="#">電腦桌</a><a href="#">電池</a><a href="#">電源適配器</a><a href="#">貼膜</a><a href="#">清潔用品</a><a href="#">筆記本散熱器</a><a href="#">USB拓展</a><a href="#">平板配件</a><a href="#">特色附件</a><a href="#">插座網(wǎng)線/電話線</a><a href="#">影音線材</a><a href="#">電腦線材</a></dd>
?????????????? </dl>???????????? ?
?????????????? <dl id="shoplist_item">
???????????????? <dt>電腦外設(shè)</dt>
???????????????? <dd><a href="#">鼠標(biāo)</a><a href="#">鍵盤(pán)</a><a href="#">游戲外設(shè)</a><a href="#">移動(dòng)硬盤(pán)</a><a href="#">攝像頭</a><a href="#">高清播放器</a><a href="#">外置盒</a><a href="#">移動(dòng)硬盤(pán)包</a><a href="#">手寫(xiě)板/繪圖板</a></dd>
?????????????? </dl> ?
?????????????? <dl id="shoplist_item">
???????????????? <dt>網(wǎng)絡(luò)設(shè)備</dt>
???????????????? <dd><a href="#">路由卡</a><a href="#">網(wǎng)卡</a><a href="#">3G無(wú)線上網(wǎng)</a><a href="#">交換機(jī)</a><a href="#">網(wǎng)絡(luò)存儲(chǔ)</a><a href="#">布線工具</a><a href="#">網(wǎng)絡(luò)配件</a><a href="#">正版軟件</a></dd>
?????????????? </dl>????????????????????? ?
?????????????? <dl id="shoplist_item">
???????????????? <dt>音頻設(shè)備</dt>
???????????????? <dd><a href="#">音箱</a><a href="#">耳機(jī)/耳麥</a><a href="#">麥克風(fēng)</a><a href="#">聲卡</a><a href="#">音頻附件</a><a href="#">錄音筆</a></dd>
?????????????? </dl>
?????????????? <ul class="fangkuai fl">
?????????????????? <li><a href="#">電腦整機(jī)頻道</a><img src="images/icon/右箭頭.png" width="5" height="8"/></li>
?????????????????? <li><a href="#">硬件/外設(shè)頻道</a><img src="images/icon/右箭頭.png" width="5" height="8"/></li>
?????????????? </ul>
????????????? </div>
????????????? </div>
?????????? </dl>

CSS部分：

.shopclass_show?dl:hover?{
????background-color:#FFF;
????padding:13px?10px;
????border-top:1px?solid?#5AA1FE;
????border-bottom:1px?solid?#3487F2;
????line-height:1.5;
????border-left:#4593FD?solid?1px;
????border-right:0px;
????}
.shopclass_show?dl:hover?dt{
????background:none;
????}
.shopclass_show?dl:hover?.aLink{
????width:48px;
????height:20px;
????line-height:20px;
????background:url(../images/icon/aLink.png)?left?center?no-repeat;
????display:inline-block;
????text-align:center;
????text-decoration:underline;
????font-size:12px;
????color:#FFF;
????}
.shopclass_show?dl:hover?a{
????color:#000;
????}

?/*鼠標(biāo)移動(dòng)到上面時(shí)的樣式*/
.shopclass_show?dl:hover?#shopclass_list{
????display:block;
????}
?/*懸浮層樣式*/

JS部分：

?window.onload = function () {
??????????? var lis = document.getElementsByTagName('dl');
??????????? for(i = 0;i<lis.length;i++){
??????????????? lis[i].onmouseover = function (){
??????????????????? this.className = "dlhover";
??????????????? }
??????????????? lis[i].onmouseout = function (){
??????????????????? this.className = "";
??????????????? }
??????????? }
??????? }