Question

我正在创建一个网站，我有这个下拉CSS代码创建和工作。我知道标签可以更好，但我对网站的HTML和CSS代码的访问非常非常有限，所以我必须使用我所拥有的。无论如何，代码本身和下拉菜单都有效，但是我在添加某种效果方面遇到了很多麻烦。如果可能的话，我想要一个非常酷的3D设计，但我绝对会采用简单的淡入式下拉动画。谢谢你能给我的任何帮助！

    `/* NAVIGATION HOVER MENUS*/

    #navigation ul.menu li {
        float: left;
        white-space: nowrap;
    }

    #navigation .menu li {
        float: left;
        padding: 0;
    }

    #navigation #main-menu a {
        display: inline-block;
        padding: 10px 25px;
    }

    #main-menu a.active, #main-menu a:hover, #main-menu a.active-trail {}

    #navigation ul li a.active, #navigation ul li.active-trail a {
        box-shadow: none;
    }

    #navigation #main-menu li.active, #navigation #main-menu li:hover, #navigation #main-menu li.active-trail {
        font-weight: normal;
    }

    #navigation #main-menu li.active > a, #navigation #main-menu li:hover > a, #navigation #main-menu li.active-trail > a {
        box-shadow: none;
        background: #fff;
    }

    .front #navigation #main-menu li:first-child {
        font-weight: normal;
    }

    .front #navigation #main-menu li:first-child a {
    }

    #navigation ul.menu li .menu li {
        float: none;
    }

    #navigation #main-menu .menu li .menu li, #navigation #main-menu .menu li .menu li:hover, #navigation #main-menu .menu li .menu li.active-trail {
    border-top: none;
    display: block;
    }


     #navigation #main-menu .menu li .menu li a {
        padding: 10px 25px;
        display: block;
        background: #fff;
        width: 100%;
        border-bottom: 1px solid #d1d1d1;
        border-bottom-left-radius: 0;
        -moz-border-radius-bottomright: 0;
        -webkit-border-bottom-right-radius: 0;
        border-bottom-right-radius: 0;
        top: 0;
        color: #666;
    }

     #navigation #main-menu .menu li .menu li.last a {
          background: #fff;
          border-bottom-left-radius: 5px;
          -moz-border-radius-bottomright: 5px;
          -webkit-border-bottom-right-radius:5px;
          border-bottom-right-radius: 5px;
     }


     #navigation #main-menu .menu li .menu li a:hover, #navigation #main-menu .menu li .menu li a.active-trail {
         color: #f89433;
     }

    #navigation #main-menu .menu li .menu li.menu__item.is-leaf {
        margin-bottom: 0;
    }

    #navigation .menu li .menu {
        position: relative;
        display: inherit;
    }

    #navigation .menu li .menu {
      display: inherit;
        position: absolute;
        top: 32px;
        min-width: 200px;
        display: none;
    }


    #navigation .menu li .menu li:hover a {
        color: #eb9246;
    }

    #navigation #main-menu .menu li .menu li  .menu li {
        display: none;
    }

    #navigation .region-sidebar-first .menu li .menu li .menu li {
        display: block;
    }


     #navigation #main-menu .menu li .menu li {
        text-decoration: none;
        display: block;
        float: none;
        text-align: left;
        margin-top: 0;
    }

     #navigation #main-menu .menu li > .menu li {

    }

     #navigation #main-menu .menu li .menu li:hover {
      background-color: transparent;
    }

    #navigation .menu li:hover .menu {
      display: block !important;
      z-index: 9999 !important;
    }

Answer 1

这是一个基本示例，我尝试使用您的css，但您没有包含html而css本身就是有点混乱。

真正的魔力发生在以下几行：

-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;

如果为隐藏下拉列表定义不透明度为0，然后在悬停时将其不透明度设为1，则这4行将呈现平滑动画。我将时间设置为2秒来夸大。你希望它更像是0.5秒或更短。

all表示normal和hover之间的所有css差异都会动画化。

https://jsfiddle.net/f2hno7do/2/

Answer 2

我明白了！定义的div和类令人难以置信的混乱，但一旦我弄清楚哪个是我能够创建一个漂亮的动画。我无法发布html，因为我没有完全访问权限，CSS受到我公司的限制。感谢您的所有投入！

CSS下载导航淡入

2 个答案: