title: CSS Drop Down Navigation Fade-In
body: <p>I am creating a website and I have this drop down CSS code created and working.  I understand the tags could be a lot better, but I have very, very limited access to the website's HTML and CSS code, so I have to work with what I have.  Anyway, the code itself and the drop down menu works, but I am having a lot of trouble adding some kind of effect to this.  I would like a really cool 3D design if at all possible, but I will absolutely take a simple fade-in drop down animation.  Thanks for any help you can give me!</p>
  
  <pre><code>    `/* 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 &gt; a, #navigation #main-menu li:hover &gt; a, #navigation #main-menu li.active-trail &gt; 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 &gt; .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;
      }
  </code></pre>