HTML部分：

?<dl class="shopclass_item">
????????????? <dt><a href="#" class="b">手機</a> <a href="#" class="b">數碼</a>? <a href="#" class="aLink">合約機</a></dt>
????????????? <dd><a href="#">榮耀3X</a> <a href="#">單反</a> <a href="#">智能設備</a></dd>
????????????? <div id="shopclass_list">
????????????? <div class="shopclass_cont">
?????????????? <dl id="shoplist_item">
???????????????? <dt>電腦整機</dt>
???????????????? <dd><a href="#">筆記本</a><a href="#">超極本</a><a href="#">上網本</a><a href="#">平板電腦</a><a href="#">臺式機</a></dd>
?????????????? </dl>
?????????????? <dl id="shoplist_item">
???????????????? <dt>裝機配件</dt>
???????????????? <dd><a href="#">CPU</a><a href="#">硬盤</a><a href="#">SSD固態硬盤</a><a href="#">內存</a><a href="#">顯示</a><a href="#">器智能顯示器</a><a href="#">主板</a><a href="#">顯卡</a><a href="#">機箱</a><a href="#">電源</a><a href="#">散熱器</a><a href="#">刻錄機/光驅</a><a href="#">聲卡</a><a href="#">拓展卡</a><a href="#">服務器配件</a><a href="#">DIV小附件</a><a href="#">裝機/配件安裝</a></dd>
?????????????? </dl>
?????????????? <dl id="shoplist_item">
???????????????? <dt>整機附件</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="#">插座網線/電話線</a><a href="#">影音線材</a><a href="#">電腦線材</a></dd>
?????????????? </dl>???????????? ?
?????????????? <dl id="shoplist_item">
???????????????? <dt>電腦外設</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="#">移動硬盤包</a><a href="#">手寫板/繪圖板</a></dd>
?????????????? </dl> ?
?????????????? <dl id="shoplist_item">
???????????????? <dt>網絡設備</dt>
???????????????? <dd><a href="#">路由卡</a><a href="#">網卡</a><a href="#">3G無線上網</a><a href="#">交換機</a><a href="#">網絡存儲</a><a href="#">布線工具</a><a href="#">網絡配件</a><a href="#">正版軟件</a></dd>
?????????????? </dl>????????????????????? ?
?????????????? <dl id="shoplist_item">
???????????????? <dt>音頻設備</dt>
???????????????? <dd><a href="#">音箱</a><a href="#">耳機/耳麥</a><a href="#">麥克風</a><a href="#">聲卡</a><a href="#">音頻附件</a><a href="#">錄音筆</a></dd>
?????????????? </dl>
?????????????? <ul class="fangkuai fl">
?????????????????? <li><a href="#">電腦整機頻道</a><img src="images/icon/右箭頭.png" width="5" height="8"/></li>
?????????????????? <li><a href="#">硬件/外設頻道</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;
????}

?/*鼠標移動到上面時的樣式*/
.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 = "";
??????????????? }
??????????? }
??????? }