如何在博客模板上放置下拉菜單？

Question

我試圖把一個下拉菜單在我的博客上：frolichearts.blogspot.com

我試過尋找答案，但我不明白他們說的一件事。請幫幫我。

下面是導航欄的代碼：

<script type='text/javascript'> 
     jQuery(document).ready(function($){ 
      $(".tabs-widget-content-widget-themater_tabs-1432447472-id").hide(); 
      $("ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a").addClass("tabs-widget-current").show(); 
      $(".tabs-widget-content-widget-themater_tabs-1432447472-id:first").show(); 

      $("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").click(function() { 
       $("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").removeClass("tabs-widget-current a"); 
       $(this).addClass("tabs-widget-current"); 
       $(".tabs-widget-content-widget-themater_tabs-1432447472-id").hide(); 
       var activeTab = $(this).attr("href"); 
       $(activeTab).fadeIn(); 
       return false; 
      }); 
     }); 
    </script> 

<ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'> 
<li><a href='#widget-themater_tabs-1432447472-id1'>Popular</a></li> 
<li><a href='#widget-themater_tabs-1432447472-id2'>Tags</a></li> 
<li><a href='#widget-themater_tabs-1432447472-id3'>Blog Archives</a></li> 
</ul> 

Answer 1

嘗試這個例子

這將是你的HTML

<nav> 
<ul class="nav"> 
     <li class="menu"><a href="#"></a></li> 
     <li class="menu"><a>About</a> 
      <ul class="subnav01"> 
        <li><a href="#">About One</a></li> 
        <li><a href="#">About Two</a></li> 
        <li><a href="#">About Three</a></li> 
        <li><a href="#">About Four</a></li> 
        <li><a href="#">About Five</a></li> 
        <li><a href="#">About Six</a></li> 
      </ul> 
     </li> 
     <li class="menu"><a>Products</a> 
      <ul class="subnav01"> 
        <li><a href="#">Product One</a></li> 
        <li><a href="#">Product Two</a></li> 
        <li><a href="#">Product Three</a></li> 
        <li><a href="#">Product Four</a></li> 
        <li><a href="#">Product Five</a></li> 
        <li><a href="#">Product Six</a></li> 
      </ul> 
     </li> 
     <li class="menu"><a href="#">Services</a></li> 
     <li class="menu"><a href="#">Contact</a></li> 
    </ul> 
</nav> 

你的CSS

* { 
margin: 0; 
padding: 0; 
} 

body { 
    width: 100%; 
    height: 100%; 
    background: darkgray; 
} 

.nav { 
    list-style: none; 
} 

.nav li { 
margin: 0 0 10px 0; 
font-family: Helvetica; 
font-size: 11px; 
text-align: right; 
text-transform: uppercase; 
line-height: 1; 
width: 100px; 
float: left; 
} 

.nav li:nth-child(5) { 
    margin: 0; 
} 

.nav li a { 
    height: 10px; 
    padding: 10px 10px 10px 0; 
    color: white; 
    text-decoration: none; 
    display: block; 
    cursor: pointer; 
    position: relative; 
} 

.subnav01, .subnav02 { 
    width: 300px; 
    display: none; 
    list-style: none; 
} 
.subnav01 li, .subnav02 li { 
    width: 150px; 
    margin: 0; 
    text-align: center; 
} 

.subnav01 li a, .subnav02 li a { 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -ms-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
    background: dodgerblue; 
    height: 10px; 
    display:block; 
} 

.subnav01 li a:hover, .subnav02 li a:hover { 
    background: dimgray; 
} 

.active > a { 
    background: dodgerblue !important; 
} 

jQuery的一部分

jQuery(document).ready(function($){ 
    $("li.menu").on("hover", function(e){ 
     deactivateAll(this); 
     toggle(this); 
    }); 

    function deactivateAll(item) { 
     $("li").not(item).each(function(index, elem){ 
      if ($(elem).hasClass("active")) { 
       toggle(elem); 
      } 
     }); 
    } 

    function toggle(elem) { 
     $(elem).find("ul").stop(true,true).slideToggle("slow"); 
     $(elem).toggleClass("active"); 
    } 
});