title: Css drop-down menu transition effect
body: <p>Nowadays I am building a website and now I am making the menu-bar. Fortunately I have found a nice tutorial on the internet, and so far I have successfully implemented it. The tutorial and the source code can be found here:
  <a href="http://code.tutsplus.com/tutorials/how-to-build-a-kick-butt-css3-mega-drop-down-menu--net-15129" rel="nofollow">source code of the menubar</a>
  And the result of this can be found here: <a href="http://nettuts.s3.amazonaws.com/819_megamenu/demo/index.html" rel="nofollow">Live Demo site</a>
  Actually, I would like to add an transition effect to my dropdown menus. I would like to have the following effect: When I move the mouse to one of the menubar the drop-down menu will show up with a "fade-in" effect changing the opacity(If I am not mistaken, the fade-in effect is connected to change the opacity). And If I would move to another position with the mouse the drop-down goes back slowly, changing the opacity from 1 to 0.</p>
  
  <p>Needless to say, I have already tried different solutions for it, but none of them worked :\ My last attempt was the following but it did not worked properly. I see the effect, but the whole menu bar is screwed up.</p>
  
  <pre><code>.dropdown_1column,
  .dropdown_2columns,
  .dropdown_3columns,
  .dropdown_4columns,
  .dropdown_5columns {
  visibility:visible!important;
  opacity:0;
  transition:opacity 0.4s ease-in-out;
  -moz-transition:opacity 0.4s ease-in-out;
  -webkit-transition:opacity 0.4s ease-in-out;
  -o-transition:opacity 0.4s ease-in-out;
  ...
  </code></pre>
  
  <p>I hope you could help me, I would appreciate it, Thanks in advance!</p>