如何添加Smooth CSS下拉菜單

Question

我設法使用CSS創建帶下拉菜單（子菜單）的菜單。但是我無法爲我的編碼添加平滑的下拉菜單效果。我試圖添加-moz-transition等等。我不知道在哪裏添加這些轉換，以使我的普通下拉菜單變成平滑下拉菜單效果。

下面是我的HTML編碼

<div id='cssmenu'> 
<ul> 
    <li class='active'><a href='index.html'><span>Home</span></a></li> 
    <li class='has-sub'><a href='#'><span>Products</span></a> 
     <ul> 
     <li class='has-sub'><a href='#'><span>Product 1</span></a> 
      <ul> 
       <li><a href='#'><span>Sub Item</span></a></li> 
       <li class='last'><a href='#'><span>Sub Item</span></a></li> 
      </ul> 
     </li> 
     <li class='has-sub'><a href='#'><span>Product 2</span></a> 
      <ul> 
       <li><a href='#'><span>Sub Item</span></a></li> 
       <li class='last'><a href='#'><span>Sub Item</span></a></li> 
      </ul> 
     </li> 
     </ul> 
    </li> 
    <li><a href='#'><span>About</span></a></li> 
    <li class='last'><a href='#'><span>Contact</span></a></li> 
</ul> 
</div> 

這裏是CSS

<style media="screen" type="text/css"> 
    #cssmenu ul, 
    #cssmenu li, 
    #cssmenu span, 
    #cssmenu a { 
     margin: 0; 
     padding: 0; 
     position: relative; 
    } 
    #cssmenu { 
     height: 49px; 
     border-radius: 5px 5px 0 0; 
     -moz-border-radius: 5px 5px 0 0; 
     -webkit-border-radius: 5px 5px 0 0; 
     background: #fefefe; 
     background: -moz-linear-gradient(top, #fefefe 0%, #eee9f0 100%); 
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefefe), color-stop(100%, #eee9f0)); 
     background: -webkit-linear-gradient(top, #fefefe 0%, #eee9f0 100%); 
     background: -o-linear-gradient(top, #fefefe 0%, #eee9f0 100%); 
     background: -ms-linear-gradient(top, #fefefe 0%, #eee9f0 100%); 
     background: linear-gradient(top, #fefefe 0%, #eee9f0 100%); 
     border-bottom: 2px solid #db000b; 
     width: auto; 
    } 
    #cssmenu:after, 
    #cssmenu ul:after { 
     content: ''; 
     display: block; 
     clear: both; 
    } 
    #cssmenu a { 
     background: #fefefe; 
     background: -moz-linear-gradient(top, #fefefe 0%, #ececec 100%); 
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefefe), color-stop(100%, #ececec)); 
     background: -webkit-linear-gradient(top, #fefefe 0%, #ececec 100%); 
     background: -o-linear-gradient(top, #fefefe 0%, #ececec 100%); 
     background: -ms-linear-gradient(top, #fefefe 0%, #ececec 100%); 
     background: linear-gradient(top, #fefefe 0%, #ececec 100%); 
     color: #000; 
     display: inline-block; 
     font-family: Helvetica, Arial, Verdana, sans-serif; 
     font-size: 12px; 
     line-height: 49px; 
     padding: 0 20px; 
     text-decoration: none; 
    } 
    #cssmenu ul { 
     list-style: none; 
    } 
    #cssmenu > ul { 
     float: left; 
    } 
    #cssmenu > ul > li { 
     float: left; 
    } 
    #cssmenu > ul > li > a { 
     color: #000; 
     font-size: 12px; 
    } 
    #cssmenu > ul > li:hover:after { 
     content: ''; 
     display: block; 
     width: 0; 
     height: 0; 
     position: absolute; 
     left: 50%; 
     bottom: 0; 
     border-left: 10px solid transparent; 
     border-right: 10px solid transparent; 
     border-bottom: 10px solid #db000b; 
     margin-left: -10px; 
    } 
    #cssmenu > ul > li:first-child > a { 
     border-radius: 5px 0 0 0; 
     -moz-border-radius: 5px 0 0 0; 
     -webkit-border-radius: 5px 0 0 0; 
    } 
    #cssmenu > ul > li.active:after { 
     content: ''; 
     display: block; 
     width: 0; 
     height: 0; 
     position: absolute; 
     left: 50%; 
     bottom: 0; 
     border-left: 10px solid transparent; 
     border-right: 10px solid transparent; 
     border-bottom: 10px solid #db000b; 
     margin-left: -10px; 
    } 
    #cssmenu > ul > li.active > a { 
     -moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1); 
     -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1); 
     box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1); 
     background: #ececec; 
     background: -moz-linear-gradient(top, #ececec 0%, #ffeeff ef 100%); 
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ececec), color-stop(100%, #ffeeff ef)); 
     background: -webkit-linear-gradient(top, #ececec 0%, #ffeeff ef 100%); 
     background: -o-linear-gradient(top, #ececec 0%, #ffeeff ef 100%); 
     background: -ms-linear-gradient(top, #ececec 0%, #ffeeff ef 100%); 
     background: linear-gradient(top, #ececec 0%, #ffeeff ef 100%); 
    } 
    #cssmenu > ul > li:hover > a { 
     background: #ececec; 
     background: -moz-linear-gradient(top, #ececec 0%, #ffeeff ef 100%); 
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ececec), color-stop(100%, #ffeeff ef)); 
     background: -webkit-linear-gradient(top, #ececec 0%, #ffeeff ef 100%); 
     background: -o-linear-gradient(top, #ececec 0%, #ffeeff ef 100%); 
     background: -ms-linear-gradient(top, #ececec 0%, #ffeeff ef 100%); 
     background: linear-gradient(top, #ececec 0%, #ffeeff ef 100%); 
     -moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1); 
     -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1); 
     box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1); 
    } 
    #cssmenu .has-sub { 
     z-index: 1; 
    } 
    #cssmenu .has-sub:hover > ul { 
     display: block; 
    } 
    #cssmenu .has-sub ul { 
     display: none; 
     position: absolute; 
     width: 200px; 
     top: 100%; 
     left: 0; 
    } 
    #cssmenu .has-sub ul li { 
     *margin-bottom: -1px; 
    } 
    #cssmenu .has-sub ul li a { 
     background: #db000b; 
     border-bottom: 1px dotted #ff0f1b; 
     filter: none; 
     font-size: 11px; 
     display: block; 
     line-height: 120%; 
     padding: 10px; 
     color: #ffffff; 
    } 
    #cssmenu .has-sub ul li:hover a { 
     background: #a80008; 
    } 
    #cssmenu .has-sub .has-sub:hover > ul { 
     display: block; 
    } 
    #cssmenu .has-sub .has-sub ul { 
     display: none; 
     position: absolute; 
     left: 100%; 
     top: 0; 
    } 
    #cssmenu .has-sub .has-sub ul li a { 
     background: #a80008; 
     border-bottom: 1px dotted #ff0f1b; 
    } 
    #cssmenu .has-sub .has-sub ul li a:hover { 
     background: #8f0007; 
    } 
    </style> 

Answer 1

我建議使用一些更廣泛，如jQuery，給你想要的效果。這裏有一個'accordion'效果的鏈接，聽起來像是你想要的東西。手風琴菜單的佈局是完全可調的 - 所以不要擔心，如果你不喜歡默認佈局的設計。

http://jqueryui.com/accordion/#default

添加的jQuery到您的網頁需要30秒左右，但給你有益的補充，動畫爲您的網頁的永恆和交互式內容操作！

Answer 2

ü可以使用jQuery在這裏放鬆您dropdwon菜單特效就是一個例子

http://devsnippets.com/article/slick-drop-down-menu-with-easing-effect-using-jquery-css.html

Answer 3

當你寫了「平穩的CSS菜單」你的意思是沒有JavaScript和CSS只？

如果是這樣，請使用css level 3轉換。

#cssmenu ul ul { 
    /* this will apply to inner UL, adapt to your desired selector */ 
    -webkit-transition: height 0.3s ease-in-out; 
    -o-transition: height 0.3s ease-in-out; 
    -moz-transition: height 0.3s ease-in-out; 
    transition: height 0.3s ease-in-out; 
} 

[編輯]

如果沒有你的環境中工作，也許是因爲沒有「高度你內心的UL元素。

#cssmenu .has-sub:hover > ul { 
    display: block; 
    height:auto; /* add this */ 
} 
#cssmenu .has-sub ul { 
    display: none; 
    position: absolute; 
    width: 200px; 
    height:0; /* add this */ 
    top: 100%; 
    left: 0; 
} 

欲瞭解更多有關跨瀏覽器解決方案的話題，搜索網爲CSS過渡產生

Answer 4

我用這個 http://cssdeck.com/labs/pure-css3-smooth-drop-down-menu

此菜單僅在CSS3創建這是來自Forrst這篇文章的啓發！這包括一個嵌套的ul結構，用於創建菜單的第二層級，該層級最初通過將其不透明度設置爲0而隱藏起來。當鏈接懸停後，相應的ul會顯示並向下滑動。這可以通過將其不透明度設置爲1並在其與CSS3過渡結合起來以使過程平滑地進行動畫處理時懸停來更改其頂部偏移量來實現。

退房的代碼並使用它，就像你喜歡:)