menu when hovered moves other menu to the right

Question

so i have this menu setup everything is working but the problem is when i hover on the menu it should only drop the menu but what happens to me is that the menu drops down and the menu that i was pointing adds some blank space on the right on it. heres the look.

http://prntscr.com/4sjqzi

there should be no space from my first menu

CSS:-

.menu {
     width:auto;
     float:left;
     display:block;
 }
 .children {
     display:none;
 }
 #navcontainer {
     display:inline;
     padding:0px;
     margin: 0px;
     /*-8px 0 0 10px;*/
     list-style:none;
     position:relative;
     z-index:1;
     float:left;
     height: 20px;
 }
 #navcontainer ul {
     margin: 0;
     padding: 0;
     list-style-type: none;
     text-align: left;
 }
 #navcontainer ul li {
     display: block;
     float: left;
 }
 #navcontainer ul li a {
     text-decoration: none;
     padding: .2em 1em;
     color: #b37032;
     background-color: #dbd2c1;
     width: 100%;
 }
 #navcontainer ul li ul li {
     display:block;
     width:auto;
     float: none;
     background:#edebd7;
 }
 #navcontainer ul li ul li a {
     background: transparent !important;
     color: #724e32;
     border-top: 0px !important;
     border-left: 0px !important;
     border-right: 0px !important;
     ;
     -moz-border-radius: 0 0 0 0 !important;
     ;
     -webkit-border-radius: 0 0 0 0 !important;
     ;
     border-radius: 0 0 0 0 !important;
     ;
     background-color: transparent !important;
     ;
     opacity: 1 !important;
     ;
 }
 #navcontainer li:hover ul {
     display: block;
 }
 #navcontainer ul li:hover a {
     color: #724e32;
     border-top: 1px solid #694b0a;
     border-left: 1px solid #694b0a;
     border-right: 1px solid #694b0a;
     -moz-border-radius: 5px 5px 0 0;
     -webkit-border-radius: 5px 5px 0 0;
     border-radius: 5px 5px 0 0;
     background-color: #edebd7;
     opacity: 0.5;
 }
 #navcontainer ul li a:hover {
     color: #fff;
     background-color: #d3c096;
 }
 #navcontainer li:hover ul.children {
     left:0;
     top:29px;
     background:#edebd7;
     color:#724e32;
     padding:5px;
     border-left:1px solid #694b0a;
     border-right:1px solid #694b0a;
     border-bottom:1px solid #694b0a;
     white-space:nowrap;
     width:160px;
     height:auto;
     z-index:300;
     -moz-border-radius:0 0 5px 5px;
     -webkit-border-radius:0 0 5px 5px;
     border-radius:0 0 5px 5px;
 }
 #navcontainer ul li ul li:hover {
     color: #fff;
     background-color: #d3c096;
 }
 #navcontainer ul li ul li a:hover {
     color: #fff;
     background-color: #d3c096;
 }
 #navcontainer ul li ul li:hover a {
     color: #fff;
     background-color: transparent;
 }

heres my html im using wordpress

<section class="twelve columns clearfix" style="background:transparent">
<div id="navcontainer">
<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'container' => false, 'theme_location' => 'header-menu' ) ); ?></div>
</section> 

Answer 1

I suspect you are wrapping your title and dropdown all with a div and that div is floated. When you turn on the dropdown div it makes the wrapper div become larger and forces the float to readjust. Maybe you can separate the menu div divs from the dropdown divs. Then they won't affect each other.