带过渡的下拉导航

Question

我尝试使用css转换代码轻松实现我的下拉导航，就像这个主题演示一样：

http://themeforest.net/item/heat-premium-portfolio-wordpress-theme/full_screen_preview/3700508?ref=themespotters

但我尝试了许多代码方式，只是不能产生这种效果我还需要将子菜单悬停在其父级上或者不能点击它时保持更长时间！

非常感谢，这是我的网络链接：http://hxxa.info/

我现在拥有的css代码：

#menu_container { border-top: 1px solid #000; border-bottom: 15px solid #000; padding: 0px 0px; font-size: 13.5px; }
#menu_container ul { list-style-type: none; float: left; padding: 0px 0; }
#menu_container ul li { float: left; }
#menu_container ul li a { display: block; color: #000; text-decoration: none; padding: 5px 20px; margin: 0 0px; }
#menu_container ul li a:hover { background-color: #000; color: #fff; }
#menu_container ul li.current-menu-item a, #menu_container ul li.current_page_item a  { background-color: #000; color: #fff; }
#menu_container .cat_menu { border-left: 1px dotted #DDDDDD; }
#menu_container ul li ul {display: none;} 
#menu_container ul li:hover ul {border-top: 1px solid #000; border-bottom: 15px solid #000; width:278px; display: inline-block;
position: absolute; z-index:999; background-color: #fff;}
#menu_container ul li ul li:hover { width: 278px; background-color: #000;}
#menu_container ul li ul li a:hover { background-color: #fff; color: #5e5e5e}