Edit in JSFiddle

HTML
Result
<style>
.tabs-outer {z-index:1;}  
.tabs .widget ul, .tabs .widget ul {overflow: visible;}
.nav {box-sizing: border-box;width: 100%;padding: 0;margin: 0 auto;background: #333333;height: 40px;}
.nav li {list-style: none;}
.nav li.nav-right {float: right;}
.nav > li {padding: 0;float: left;position: relative;}
.nav > li > a {float: left;color: #FFFFFF;font:13px arial;text-decoration: none;line-height: 40px;padding: 0 14px;margin-right: 1px;height: 40px;}
.nav > li > a:last-of-type {margin-right: 0;}
.nav > li > div {position: absolute;left: 0;top: 40px;display: none;background:#351500;color:#FFFF00;padding: 10px;overflow: hidden;z-index: 99999;}
.nav > li > div ul {margin: 0;padding: 0;}
.nav > li > div ul li a {background:#115599;color: #FFF;text-decoration: none;padding: 9px 12px;margin-bottom: 2px;margin-right: 2px;display: block;}
.nav > li > div ul li a:hover {background: #621061;color: #FFFFFF;}
.nav > li > div p {color: #F11111;}
.nav > li > div .right {right: 0;left: auto;}
.nav > li:hover > a {background:#173377;color:#FFFFFF;}
.nav > li:first-child > a {border-left: 0;}
.nav > li:last-child > a {border-right: 0;}
.nav.nojs > li:hover > a {background: #105105;color: #FFFFFF;}
.nav.nojs > li:hover div[class^="container-"] {display: block !important;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1;}
.navvisfix {visibility: visible !important;opacity: 1 !important;display: block !important;}
.container-1 {width: 240px;}
.container-1 .col1 {margin: 0;padding: 0;float: left;width: 100%;}
.container-2 {width: 480px;}
.container-2 .col1 {margin: 0;padding: 0;float: left;width: 50%;}
.container-2 .col2 {margin: 0;padding: 0;float: left;width: 100%;}
.container-3 {width: 720px;}
.container-3 .col1 {margin: 0;padding: 0;float: left;width: 33.33333%;}
.container-3 .col2 {margin: 0;padding: 0;float: left;width: 66.66667%;}
.container-3 .col3 {margin: 0;padding: 0;float: left;width: 100%;}
.container-4 {width: 960px;}
.container-4 .col1 {margin: 0;padding: 0;float: left;width: 25%;}
.container-4 .col2 {margin: 0;padding: 0;float: left;width: 50%;}
.container-4 .col3 {margin: 0;padding: 0;float: left;width: 75%;}
.container-4 .col4 {margin: 0;padding: 0;float: left;width: 100%;}
.container-5 {width: 1200px;}
.container-5 .col1 {margin: 0;padding: 0;float: left;width: 20%;}
.container-5 .col2 {margin: 0;padding: 0;float: left;width: 40%;}
.container-5 .col3 {margin: 0;padding: 0;float: left;width: 60%;}
.container-5 .col4 {margin: 0;padding: 0;float: left;width: 80%;}
.container-5 .col5 {margin: 0;padding: 0;float: left;width: 100%;}
</style>

<nav class="navigation">
<ul class="nav nojs" id="menu">
<li><a href="http://the-best-widgets.blogspot.gr">HOME</a></li>
<li><a href="http://the-best-widgets.blogspot.gr/search/label/ΟΡΙΖΟΝΤΙΑ ΚΑΙ ΚΑΘΕΤΑ ΜΕΝΟΥ">MENUS-1</a>
<div class="container-5">
<div class="col1">
<h3>HORIZONTAL MENUS</h3>
<ul>
<li><a href="http://the-best-widgets.blogspot.gr/2013/05/blog-post.html">HORIZONTAL MENU-1</a></li>
<li><a href="http://the-best-widgets.blogspot.gr/2013/05/blog-post.html">HORIZONTAL MENU-2</a></li>
<li><a href="http://the-best-widgets.blogspot.gr/2013/05/blog-post.html">HORIZONTAL MENU-3</a></li>
<li><a href="http://the-best-widgets.blogspot.gr/2013/05/blog-post.html">HORIZONTAL MENU-4</a></li>
<li><a href="http://the-best-widgets.blogspot.gr/2013/05/blog-post.html">HORIZONTAL MENU-5</a></li>
</ul>
</div>
<div class="col1">
<h3>VETRICAL MENUS</h3>
<ul>
<li><a href="#">VETRICAL MENU-1</a></li>
<li><a href="#">VETRICAL MENU-2</a></li>
<li><a href="#">VETRICAL MENU-3</a></li>
<li><a href="#">VETRICAL MENU-4</a></li>
<li><a href="#">VETRICAL MENU-5</a></li>
</ul>
</div>
<div class="col1">
<h3>ROLL DOWN MENUS</h3>
<ul>
<li><a href="#">ROLL DOWN MENU-1</a></li>
<li><a href="#">ROLL DOWN MENU-2</a></li>
<li><a href="#">ROLL DOWN MENU-3</a></li>
<li><a href="#">ROLL DOWN MENU-4</a></li>
<li><a href="#">ROLL DOWN MENU-5</a></li>
</ul>
</div>
<div class="col1">
<h3>MEGA MENUS</h3>
<ul>
<li><a href="#">MEGA MENU No-1</a></li>
<li><a href="#">MEGA MENU-No 2</a></li>
<li><a href="#">MEGA MENU-No 3</a></li>
<li><a href="#">MEGA MENU-No 4</a></li>
<li><a href="#">MEGA MENU-No 5</a></li>
</ul>
</div>
<div class="col1">
<h3>ACCORDION MENUS</h3>
<ul>
<li><a href="#">ACCORDION MENU-1</a></li>
<li><a href="#">ACCORDION MENU-2</a></li>
<li><a href="#">ACCORDION MENU-3</a></li>
<li><a href="#">ACCORDION MENU-4</a></li>
<li><a href="#">ACCORDION MENU-5</a></li>
</ul>
</div></div></li>
<li><a href="#">MENUS-2</a>
<div class="container-4">
<div class="col1">
<h3>HORIZONTAL MENUS</h3>
<ul>
<li><a href="#">HORIZONTAL MENU-1</a></li>
<li><a href="#">HORIZONTAL MENU-2</a></li>
<li><a href="#">HORIZONTAL MENU-3</a></li>
<li><a href="#">HORIZONTAL MENU-4</a></li>
<li><a href="#">HORIZONTAL MENU-5</a></li>
</ul>
</div>
<div class="col1">
<h3>VETRICAL MENUS</h3>
<ul>
<li><a href="#">VETRICAL MENU-1</a></li>
<li><a href="#">VETRICAL MENU-2</a></li>
<li><a href="#">VETRICAL MENU-3</a></li>
<li><a href="#">VETRICAL MENU-4</a></li>
<li><a href="#">VETRICAL MENU-5</a></li>
</ul>
</div>
<div class="col1">
<h3>ROLL DOWN MENUS</h3>
<ul>
<li><a href="#">ROLL DOWN MENU-1</a></li>
<li><a href="#">ROLL DOWN MENU-2</a></li>
<li><a href="#">ROLL DOWN MENU-3</a></li>
<li><a href="#">ROLL DOWN MENU-4</a></li>
<li><a href="#">ROLL DOWN MENU-5</a></li>
</ul>
</div>
<div class="col1">
<h3>MEGA MENUS</h3>
<ul>
<li><a href="#">MEGA MENU No-1</a></li>
<li><a href="#">MEGA MENU-No 2</a></li>
<li><a href="#">MEGA MENU-No 3</a></li>
<li><a href="#">MEGA MENU-No 4</a></li>
<li><a href="#">MEGA MENU-No 5</a></li>
</ul>
</div></div></li>
<li><a href="#">MENUS-3</a>
<div class="container-3">
<div class="col1">
<h3>HORIZONTAL MENUS</h3>
<ul>
<li><a href="#">HORIZONTAL MENU-1</a></li>
<li><a href="#">HORIZONTAL MENU-2</a></li>
<li><a href="#">HORIZONTAL MENU-3</a></li>
<li><a href="#">HORIZONTAL MENU-4</a></li>
<li><a href="#">HORIZONTAL MENU-5</a></li>
</ul>
</div>
<div class="col1">
<h3>VETRICAL MENUS</h3>
<ul>
<li><a href="#">VETRICAL MENU-1</a></li>
<li><a href="#">VETRICAL MENU-2</a></li>
<li><a href="#">VETRICAL MENU-3</a></li>
<li><a href="#">VETRICAL MENU-4</a></li>
<li><a href="#">VETRICAL MENU-5</a></li>
</ul>
</div>
<div class="col1">
<h3>ROLL DOWN MENUS</h3>
<ul>
<li><a href="#">ROLL DOWN MENU-1</a></li>
<li><a href="#">ROLL DOWN MENU-2</a></li>
<li><a href="#">ROLL DOWN MENU-3</a></li>
<li><a href="#">ROLL DOWN MENU-4</a></li>
<li><a href="#">ROLL DOWN MENU-5</a></li>
</ul>
</div>
</div></li>
<li><a href="#">MENUS-4</a>
<div class="container-2">
<div class="col1">
<h3>HORIZONTAL MENUS</h3>
<ul>
<li><a href="#">HORIZONTAL MENU-1</a></li>
<li><a href="#">HORIZONTAL MENU-2</a></li>
<li><a href="#">HORIZONTAL MENU-3</a></li>
<li><a href="#">HORIZONTAL MENU-4</a></li>
<li><a href="#">HORIZONTAL MENU-5</a></li>
</ul>
</div>
<div class="col1">
<h3>VETRICAL MENUS</h3>
<ul>
<li><a href="#">VETRICAL MENU-1</a></li>
<li><a href="#">VETRICAL MENU-2</a></li>
<li><a href="#">VETRICAL MENU-3</a></li>
<li><a href="#">VETRICAL MENU-4</a></li>
<li><a href="#">VETRICAL MENU-5</a></li>
</ul>
</div></div></li>
<li><a href="#">MENUS-5</a>
<div class="container-1">
<div class="col1">
<h3>HORIZONTAL MENUS</h3>
<ul>
<li><a href="#">HORIZONTAL MENU-1</a></li>
<li><a href="#">HORIZONTAL MENU-2</a></li>
<li><a href="#">HORIZONTAL MENU-3</a></li>
<li><a href="#">HORIZONTAL MENU-4</a></li>
<li><a href="#">HORIZONTAL MENU-5</a></li>
</ul>
</div></div></li>
<li><a href="#">SLIDERS</a></li>
<li><a href="#">WIDGETS</a></li>

</ul></nav>