CSS子菜單，彈出錯誤的地方

無法獲取我的子菜單，彈出菜單的「服務」部分。目前它只是在'服務'之上彈出並將其封鎖。我知道我是一個白癡，但我不能看到問題。有什麼建議？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>

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

來源

2014-04-01 DavePentland

只需添加top:100%;孩子UL .flexnav li.parent ul，這裏是一個fiddle

來源

2014-04-01 14:40:23

添加頂：100％

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

來源

2014-04-01 14:40:21

添加top:119px到.flexnav li.parent ul應該解決這個問題。 Example

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

來源

2014-04-01 14:42:20 Howli

爲什麼top：119px而不是top：100％？ @Howlin – DavePentland

CSS子菜單，彈出錯誤的地方

回答

相關問題