2 block-level navs on same line and centered - css

Question

I'm create a vertical dropdown navigation menu with folding submenus.
HTML:
<h2>Navigation dropdown with unfold effect</h2>
<ul class="navigation">
<a class="main" href="#url">Menu 1</a>
<li class="n1">item #1</li>
<li class="n2">item #2</li>
<li class="n3">item #3</li>
<li class="n4">item #4</li>
<li class="n5">item #5</li>
</ul>
<ul class="navigation">
<a class="main" href="#url">Menu 2</a>
<li class="n1">item #1</li>
<li class="n2">item #2</li>
<li class="n3">item #3</li>
<li class="n4">item #4</li>
</ul>
CSS:
.navigation {
list-style: none;
padding: 0;
width: 250px;
height: 40px;
margin: 5px auto;
background: #95C11F;
position: relative;
z-index: 100;
}
.navigation, .navigation a.main {
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
.navigation:hover, .navigation:hover a.main {
border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
}
.navigation a.main {
display: block;
height: 40px;
font: bold 15px/40px arial, sans-serif;
text-align: center;
text-decoration: none;
color: #FFF;
-webkit-transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
position: relative;
z-index: 100;
}
.navigation:hover a.main {
color: rgba(255,255,255,0.6);
background: rgba(0,0,0,0.04);
}
.navigation li {
width: 250px;
height: 40px;
background: #F7F7F7;
font: normal 12px/40px arial, sans-serif !important;
color: #999;
text-align: center;
margin: 0;
-webkit-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: perspective(350px) rotateX(-90deg);
-o-transform: perspective(350px) rotateX(-90deg);
transform: perspective(350px) rotateX(-90deg);
box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
-webkit-box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
-moz-box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
}
.navigation li:nth-child(even) { background: #F5F5F5; }
.navigation li:nth-child(odd) { background: #EFEFEF; }
.navigation li.n1 {
-webkit-transition: 0.2s linear 0.8s;
-o-transition: 0.2s linear 0.8s;
transition: 0.2s linear 0.8s;
}
.navigation li.n2 {
-webkit-transition: 0.2s linear 0.6s;
-o-transition: 0.2s linear 0.6s;
transition: 0.2s linear 0.6s;
}
.navigation li.n3 {
-webkit-transition: 0.2s linear 0.4s;
-o-transition: 0.2s linear 0.4s;
transition: 0.2s linear 0.4s;
}
.navigation li.n4 {
-webkit-transition:0.2s linear 0.2s;
-o-transition:0.2s linear 0.2s;
transition:0.2s linear 0.2s;
}
.navigation li.n5 {
border-radius: 0px 0px 4px 4px;
-webkit-transition: 0.2s linear 0s;
-o-transition: 0.2s linear 0s;
transition: 0.2s linear 0s;
}
.navigation:hover li {
-webkit-transform: perspective(350px) rotateX(0deg);
-o-transform: perspective(350px) rotateX(0deg);
transform: perspective(350px) rotateX(0deg);
-webkit-transition:0.2s linear 0s;
-o-transition:0.2s linear 0s;
transition:0.2s linear 0s;
}
.navigation:hover .n2 {
-webkit-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.navigation:hover .n3 {
-webkit-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.navigation:hover .n4 {
transition-delay: 0.6s;
-o-transition-delay: 0.6s;
transition-delay: 0.6s;
}
.navigation:hover .n5 {
-webkit-transition-delay: 0.8s;
-o-transition-delay: 0.8s;
transition-delay: 0.8s;
}
http://jsfiddle.net/2Q6WR/1/
Is there any way to float the second submenu to the end of the previous expanded menu?

Answer 1

You can change your menu structure. Example here http://jsfiddle.net/2e5YQ/
.menu {
list-style:none;}
.menu li {
position:relative;}
.menu li:hover .drop-down {
left: 0px;
position:relative;
}
.drop-down {
left: -9999px;
position:absolute;
}
<ul class="menu">
<li>Menu 1
<ul class="drop-down">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
<li>Menu 2
<ul class="drop-down">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
But this type of menu is not very usefull because when you move mouse down under drop-down trying click to second element of main men drop-down is closing and and second element of menu go up that is very uncomfortably.