CSS 하위 메뉴가 잘못된 위치에 나타납니다.

Question

내 하위 메뉴를 가져 오는 데 문제가있어서 메뉴의 '서비스'섹션 아래로 팝업됩니다. 현재는 '서비스'상단에서 튀어 나오고 차단됩니다. 나는 바보 인 것을 알고 있지만 나는 그 문제를 볼 수 없다. 어떤 충고?

<div class="primary-menu"> 
<div class="menu-button">Menu</div> 
<ul class="flexnav"> 
<li><a href="#">HOME</a></li> 
<li><a href="About_Us.html">ABOUT US</a></li> 
<li class="parent"><a href="#">SERVICES</a> 
<ul> 
<li><a href="Building_Surveying.html">Building Surveying</a></li> 
<li><a href="Project_Managment.html">Project Management</a></li> 
<li><a href="HealthNSafety.html">Health and Safety Advice /<br>CDM Co-ordinator</a></li> 
<li><a href="Professional_services.html">Professional Services</a></li> 
<li><a href="Insurance_Consul.html">Insurance Reinstatement<br> Consultancy</a></li> 
<li><a href="ECO.html">Eco</a></li> 
</ul> 
</li> 
<li><a href="Clients.html">CLIENTS</a></li> 
<li><a href="ECO.html" id="ecotab">ECO</a></li> 
<li><a href="Contact_Us.html">CONTACT US</a></li> 
</ul> 
</div> 

가와 CSS는 이것이다 :

.primary-menu {width:100%; max-width:1440px; margin:0 auto; height:50px;} 
.menu-button {cursor:pointer; display:none; float:right; line-height:35px; font-size:2em; 

    background-position: center center; 
    background-repeat: no-repeat; 
    width: 50px; 
    /*background-size: 21px, 100%;*/ 
    text-indent: -9999px; 
    border-bottom: 1px solid rgba(255,255,255,.1); 
    box-shadow: 0 0 4px rgba(0,0,0,.4) inset; 
    border-radius: 5px; 
    margin:0.35em; 

}

.flexnav li.parent li a, .flexnav li.parent li a:hover { -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; width:auto;} 


.flexnav {list-style:none; display:inline-block; width:100%; margin-top: 0; padding:0;} 
.flexnav li {display:inline; z-index: 996; margin:0; padding:0; font-size:1em;} 


.flexnav li a {padding: 2.2em 1.2em 1.2em; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; float: left; font-size: 1.6em; color: #ffffff; text-decoration: none; display: block;} 
.flexnav li a:hover, .flexnav li.parent:hover {background-color: #00a8e5; box-shadow: 1px 1px 4px #000000;} 
.flexnav li.parent {height:auto; position:relative; float:left; margin:0; padding:0; border-right:solid 1px #444d54;} 
.flexnav li.parent ul {position:absolute; margin:0; padding:0; width:150%; display:none; background-color: #1d5671;} 
.flexnav li.parent li {background-color:#1d5671; width:100%; border:none; /*opacity:0.95;*/ font-size:0.8em; border-bottom:1px solid #2f76a8; } 
.flexnav li.parent li a {padding: 0 0.96em; color:#fff;} 
.flexnav li.parent li a:hover {background-color:#00a8e5; width:100%; display:inline-block; box-shadow: none;} 
.flexnav li.parent li:last-of-type {border-bottom:none;} 
.flexnav li.parent:hover ul {display:block;} 
.flexnav li.parent:hover li {display:block;} 
.flexnav li.parent li a {line-height:35px; display:block; border:none; text-align:left;} 

Answer 1

에 그냥 아이 UL .flexnav li.parent ul에 top:100%;을 추가, 여기에입니다.

Answer 2

위에 추가 : 100 %

.flexnav li.parent ul {top:100%; } 

Answer 3

.flexnav li.parent ul에 top:119px을 추가하면 해결됩니다. Example

.flexnav li.parent ul { 
position: absolute; 
margin: 0; 
padding: 0; 
width: 150%; 
top: 119px; 
display: none; 
background-color: #1d5671; 
}