http://immlawyer.wpengine.com/CSS菜單 - 下拉菜單上的幻像效果
這沒有任何意義。當您在「我們的服務」菜單選項下滾動主頁圖像時,會出現下拉菜單。更令人困惑的是,如果你翻過右邊的第三個人,就會出現下拉菜單。只有當您翻轉「我們的服務」區域時,才應該顯示下拉菜單。爲什麼下面的整個區域都會導致菜單出現?
注意:我已經詢問了關於菜單的另一個問題,但能夠解決該問題。謝謝。
HTML:
<span class="menu_control">≡</span>
<ul id="menu-main-menu" class="menu">
<li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-8 current_page_item menu-item-20">
<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-21">
<li id="menu-item-24" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-24">
<a href="http://immlawyer.wpengine.com/our-services/">Our Services</a>
<ul class="sub-menu">
<li id="menu-item-68" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-68">
<li id="menu-item-64" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-64">
<li id="menu-item-74" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-74">
<li id="menu-item-72" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-72">
<li id="menu-item-66" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-66">
</ul>
CSS:
.menu .menu-item-has-children a::after {
top: 10px;
}
.menu .sub-menu a {
border-bottom: 0 dotted #dddddd;
border-left-width: 0;
}
.menu .sub-menu a {
border-bottom: 1px dotted #dddddd;
border-left-width: 1px;
}
.menu a {
background-color: rgba(0, 0, 0, 0);
border-width: 0;
color: #fff;
font-size: 16px;
font-weight: 400;
}
.menu, .menu a, .menu .sub-menu {
border-color: #dddddd;
}
.menu a {
background-color: rgba(0, 0, 0, 0);
border-style: solid;
border-width: 0 1px 0 0;
color: #111111;
font-size: 13px;
letter-spacing: 0.5px;
line-height: 1em;
padding: 0.75em 1em;
text-transform: none;
}
.menu a, .menu_control {
background-color: #eeeeee;
border-style: solid;
border-width: 1px 1px 1px 0;
color: #111111;
display: block;
font-size: 13px;
letter-spacing: 1px;
line-height: 1em;
padding: 0.75em 1em;
text-transform: uppercase;
}
.lato-text, body, body a {
font-family: "Lato",sans-serif;
}
a, a:hover, .mm-button p, .mm-button:hover p, .sidebar #searchsubmit, .sidebar #searchsubmit:hover {
transition: all 0.5s linear 0s;
}