CSS選擇器懸停不能用於列表中的列表

我正在使用Wolverine's Multipurpose HTML 5 Template的Homepage Creative page中的代碼。當我將鼠標懸停在導航欄中的鏈接上時，子菜單不顯示。有沒有辦法讓子菜單顯示出來？我也注意到改變display:none.nav-main-menu > li > ul確實不是顯示子菜單。CSS選擇器懸停不能用於列表中的列表

內聯CSS

<style> 

    .nav-main-menu > li > ul { 
     display: none; 
    } 

    .nav-main-menu > li:hover > ul { 
     display:block; 
    } 
</style>

外部CSS樣式表

.nav-main-menu:not(.left-menu) > .sub-menu > ul { 
    display: none; 
    position: absolute; 
    } 

    .nav-main-menu:not(.left-menu) > .sub-menu .sub-menu > ul { 
    display: none; 
    } 

    .nav-main-menu:not(.left-menu) > .sub-menu .sub-menu:hover > ul { 
    display: block; 
    -webkit-animation: fadeIn 0.7s; 
      animation: fadeIn 0.7s; 
    } 

    .nav-main-menu:not(.left-menu) > .sub-menu:hover > ul { 
    display: block; 
    -webkit-animation: fadeIn 0.7s; 
      animation: fadeIn 0.7s; 
    }

HTML

<ul class="nav-main-menu nav-content-item"> 
      <li><a href="#">HOME</a></li> 
      <li><a href="#">ABOUT</a> 
      <ul> 
       <li><a href="">PROJECT OVERVIEW</a></li> 
       <li><a href="">PROJECT BACKGROUND</a></li> 
       <li><a href="">FUTURE APPLICATIONS</a></li> 
       </ul> 
      </li> 
</ul>

來源

2017-08-15 Alex

是否有.nav-content-item的樣式聲明可能會覆蓋.nav-main-menu的樣式聲明？ –

@ErinHalbmaier不，我查了。我用更多的CSS樣式更新了我的答案，這可能會覆蓋內聯樣式？ – Alex

@Amanda只要看看你的HTML，我看不到有'.left-menu'（可能不重要）類或'.sub-menu'類（可能很重要）的元素。 – zer00ne

這個問題我sn't你的CSS - 這是你的網頁的大小。 :-)身體當前不會延伸超過div class="main-nav-wrapper nav-wrapper-1-creative">，因此即使設置爲display: block，位於其下方的子菜單也不可見。一旦你添加了網頁的其餘部分，子菜單應該顯示正常。如果您想在此之前看到它們，請在身體上添加min-height以使其更高。

來源

2017-08-15 12:28:03

CSS選擇器懸停不能用於列表中的列表

回答

相關問題