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

添加顶部：100％到

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

Answer 2

只需将top:100%;添加到子项ul .flexnav li.parent ul，此处为fiddle

Answer 3

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

CSS子菜单，弹出错误的地方

3 个答案: