CSS下拉导航淡入

我正在创建一个网站，我有这个下拉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;
    }

---

这是一个基本的例子，我试着使用你的

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;

如果为隐藏下拉列表定义“不透明度”（opacity）为0，然后在悬停时为其指定“不透明度”（opacity）为1，则这4条线将渲染平滑动画。我将计时设置为2秒以进行夸张。您希望它更接近0.5秒或更短

all

意味着

normal

和

hover

之间css的所有差异都将设置动画

---

我想出来了！定义的div和类令人难以置信地困惑，但一旦我弄清楚了哪个是哪个，我就能够创建一个漂亮的动画。我无法发布html，因为我没有完全访问它的权限，而且CSS在某种程度上受到我公司的限制。谢谢大家的意见

您当前的编程问题是什么？“我想要些酷的东西”有点夸张！很抱歉，我遇到的问题是，虽然下拉菜单确实有效，但当您将鼠标悬停在下拉菜单上时，它基本上只会显示下拉菜单。没有淡入淡出或任何类型的过渡/动画使其看起来平滑。它看起来仍然很好，但是如果我能在下拉栏中实现某种动画，我会很喜欢的。你也能包括html结构吗？