Css 带转换的下拉式导航

我尝试使用css转换代码轻松地进行下拉式导航，就像这个主题演示：

但我尝试了很多方法来编写代码，只是不能有这样的效果，我需要我的子菜单停留更长的时间，当悬停在其父菜单上，或者它不能被点击

非常感谢，这是我的网页链接：

还有我现在的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}