成品連結：演示
技巧1：
滑動選單基本上就在寫CSS，先用CSS寫出想要的樣子，要將子選項寫在選項當中HTML:
<div id="home-menu">
<div class="title">全站分類/div>
<div class="menu1">
<li><a href="#"><h1>筆記型電腦</h1></a>
<dl>
<dt>
<a href="#"><h2>ACER 宏碁</h2></a>
<a href="#"><h2>ASUS 華碩</h2></a>
<a href="#"><h2>HP 惠普</h2></a>
<a href="#"><h2>LENOVO 聯想</h2></a>
<a href="#"><h2>MSI 微星</h2></a>
</dt>
<dt>
<a href="#"><h2>文書上網</h2></a>
<a href="#"><h2>輕薄時尚</h2></a>
<a href="#"><h2>影音娛樂</h2></a>
<a href="#"><h2>行動商務</h2></a>
<a href="#"><h2>遊戲電競</h2></a>
<a href="#"><h2>大尺吋</h2></a>
</dt>
</dl>
</li>
<li><a href="#"><h1>桌上型電腦</h1></a></li>
<li><a href="#"><h1>平板電腦</h1></a></li>
<li><a href="#"><h1>DIY 零組件</h1></a></li>
<li><a href="#"><h1>儲存裝置</h1></a></li>
<li><a href="#"><h1>週邊耗材</h1></a></li>
<li><a href="#"><h1>印表機及耗材</h1></a></li>
<li><a href="#"><h1>遊戲軟體</h1></a></li>
</div>
</div>
CSS:
h1,h2,h3 {
padding:0px;
margin:0px;
font-weight:normal;
}
a:link, a:visited {
color:#5b5247;
text-decoration: none;
}
a:hover {
color:#5b5247;
text-decoration: none;
}
li {
list-style: none;
}
/****** home-menu:start ******/
#home-menu {
width:160px;
padding-left:10px;
float:left;
}
#home-menu .menu1 a {
padding-left:10px;
list-style: none;
margin-right:20px;
color:#333;
height:28px;
padding-left:10px;
padding-top:7px;
display:block;
font-size:15px;
letter-spacing:1px;
}
#home-menu .menu1 h1 {
font-size:15px;
}
#home-menu .title {
border-bottom: 1px solid #999;
height: 25px;
color: #333;
padding-left: 10px;
font-weight: bold;
margin-right:20px;
}
#home-menu .menu1 {
padding-top:10px;
}
#home-menu .menu1 a:hover{
background: #A8FFFF;
}
#home-menu .line {
border-bottom: 1px solid #999;
margin:15px 0;
}
#home-menu .menu1 li {
position:relative;
}
#home-menu .menu1 dl {
position: absolute;
top:-30px;
left:140px;
background-color:#FFF;
border:1px solid #DDD;
padding:10px 15px 5px 15px;
min-width:160px;
min-height:360px;
box-shadow:2px 2px 5px #999;
z-index:10;
/*display:none;*/
}
#home-menu .menu1 dl a{
margin:3px 0 0 0;
padding:5px;
font-size:15px;
color:#333;
display:block;
height:auto;
}
#home-menu .menu1 dl h2{
font-size:15px;
}
#home-menu .menu1 dl dd:hover{
background: #A8FFFF;
}
/****** home-menu:end ******/
技巧2：
在把子選單隱藏，用JS讓她動
#home-menu .menu1 dl {
position: absolute;
top:-30px;
left:140px;
background-color:#FFF;
border:1px solid #DDD;
padding:10px 15px 5px 15px;
min-width:160px;
min-height:360px;
box-shadow:2px 2px 5px #999;
z-index:10;
display:none;
}
JS:
$("#home-menu .menu1 li").hover(function(){
$(this).find("dl").show();
},function (){
$(this).find("dl").hide();
});
