【Jquery】滑動選單

成品連結：演示

技巧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 ******/

全站分類

筆記型電腦

ACER 宏碁

ASUS 華碩

HP 惠普

LENOVO 聯想

MSI 微星

文書上網

輕薄時尚

影音娛樂

行動商務

遊戲電競

大尺吋

桌上型電腦

平板電腦

DIY 零組件

儲存裝置

週邊耗材

印表機及耗材

遊戲軟體

技巧2：

在把子選單隱藏，用JS讓她動

CSS：

#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();
});