메뉴를 마우스로 올리면 다른 메뉴가 오른쪽으로 이동합니다

Question

그래서이 메뉴 설정은 모두 작동하지만 문제는 메뉴에 마우스를 가져 가면 메뉴가 드롭되어야하지만 나에게 무슨 일이 일어나는가는 메뉴가 드롭 다운되고 내가 가리키고있는 메뉴는 오른쪽에 빈 공간을 추가합니다. 보기 heres.

http://prntscr.com/4sjqzi

내 첫 번째 메뉴에서 공백이 없어야합니다

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 사용하여 내 HTML 메신저 워드 프레스

<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

내가 당신을 의심이 래핑 귀하의 제목과 드롭 다운 모든 div와 그 div는 떠있었습니다. 드롭 다운 div를 켜면 래퍼 div가 커지고 플로트가 재조정됩니다. 아마도 메뉴 div div를 드롭 다운 목록에서 분리 할 수 ​​있습니다. 그러면 그들은 서로 영향을주지 않을 것입니다.