如何添加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过渡结合起来以使过程平滑地进行动画处理时悬停来更改其顶部偏移量来实现。

退房的代码并使用它，就像你喜欢:)