2015-09-27 68 views
-1

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

回答

1

看着頁面,你似乎只是在下拉菜單項中設置不透明度爲零。這隻會讓它們變得透明,但是它們仍然佔據空間,因此可以被盤旋。這就是爲什麼如果你把鼠標懸停在它們出現的地方。

您可能需要將它們設置爲display:none,直到父級停用。

0

本質上這裏發生的一切是,有很多隱藏的李的和UL的是隱藏的,並上空盤旋時,彈出的。所以,因爲它們是隱藏的,而且只需要一個鼠標懸停的事件來顯示,它們就會顯示出來。