Html CSS子菜单，出现在错误的位置

在获取子菜单时遇到问题，无法在菜单的“服务”部分下方弹出。目前，它只是突然出现在“服务”之上并将其屏蔽。我知道我是个白痴，但我就是看不出问题所在。有什么建议吗

<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>

}

将顶部：100%添加到

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

只需添加top:100%；对于子ul.flexnav li.parent ul，在.flexnav li.parent ul中添加一个top:119px应该可以解决这个问题

---

为什么top:119px而不是top:100%@霍林

.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;}

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

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