導航欄不顯示懸停的下拉內容（CSS）

嗨，我正在創建一個下拉菜單一切工作正常。接受當我隱藏我的下拉塊它不會顯示在懸停 again.Can任何人都可以幫助這裏有什麼問題。導航欄不顯示懸停的下拉內容（CSS）

HTML的：

<div id="nav_wrapper"> 
    <ul> 
     <li><a href="#">maths</a> 
      <ul class="one"> 
       <li><a href="#">real number</a></li> 
      </ul> 
     </li> 
     <li><a href="#">english</a></li> 
     <li><a href="#">hindi</a></li> 
     <li><a href="#">french</a></li> 
     <li><a href="#">german</a></li>  
    </ul> 
</div>

CSS-：

#nav_wrapper 
{ 


    position: relative; 
    top: 20px; 
    left: 100px; 

} 
#nav_wrapper ul{ 
list-style-type: none; 
} 

#nav_wrapper ul li{ 
    outline: 1px solid white; 
    width: 160px; 
    text-align: center; 
    position: relative; 
    float: left; 
    background: black; 

} 


#nav_wrapper ul li a{ 
    text-decoration: none; 
    display: inline-block; 
    height: 25px; 
    width: 160px; 
    padding-top: 7px; 
    color: #DAA520; 


} 

#nav_wrapper ul ul.one 
{ 
    display: none; 
} 
#nav_wrapper ul li a:hover { 
     color: wheat; 

} 


#nav_wrapper ul li a:hover > ul.one{ 
    display: block; 

}

現在，當我將鼠標懸停在MATHS我實數塊（下拉）沒有顯示出來。

來源

2017-02-09 Tushar Sharma

它的下一個元素不是孩子。所以試試這個a:hover + ul.one

css selector

釋

>用於孩子parent > child
+用於下一元件firstelement + nextelemnt

示例代碼段用於parent> child

.child,.second{ 
 
    display:none; 
 
    } 
 

 
.first:hover > .child{ 
 
    display:block; 
 
    }

<div class="first">hover me 
 
<a class="child"> child open</a> 
 
</div> 
 

 
<div class="second" > i m a next element</div>

示例代碼段爲firstelement + next element

.child,.second{ 
 
    display:none; 
 
    } 
 

 
.first:hover + .second{ 
 
    display:block; 
 
    }

<div class="first">hover me 
 
<a class="child"> child open</a> 
 
</div> 
 

 
<div class="second" > i m a next element</div>

#nav_wrapper 
 
{ 
 

 

 
    position: relative; 
 
    top: 20px; 
 
    left: 100px; 
 

 
} 
 
#nav_wrapper ul{ 
 
list-style-type: none; 
 
} 
 

 
#nav_wrapper ul li{ 
 
    outline: 1px solid white; 
 
    width: 160px; 
 
    text-align: center; 
 
    position: relative; 
 
    float: left; 
 
    background: black; 
 

 
} 
 

 

 
#nav_wrapper ul li a{ 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    height: 25px; 
 
    width: 160px; 
 
    padding-top: 7px; 
 
    color: #DAA520; 
 

 

 
} 
 

 
#nav_wrapper ul ul.one 
 
{ 
 
    display: none; 
 
} 
 
#nav_wrapper ul li a:hover { 
 
     color: wheat; 
 

 
} 
 

 

 
#nav_wrapper ul li a:hover + ul.one{ 
 
    display: block; 
 

 
}

<div id="nav_wrapper"> 
 
        <ul> 
 
         <li><a href="#">maths</a> 
 
          <ul class="one"> 
 
           <li><a href="#">real number</a></li> 
 
          </ul> 
 
         </li> 
 
         <li><a href="#">english</a></li> 
 
         <li><a href="#">hindi</a></li> 
 
         <li><a href="#">french</a></li> 
 
         <li><a href="#">german</a></li>  
 
        </ul> 
 

 
      </div>

來源

2017-02-09 05:11:38 prasanth

嘿感謝它的工作，你能解釋一下我多一點爲什麼我們用這裏+而不是> –

@TusharSharma看到更新的答案。我被添加了解釋和示例 – prasanth

'>''立即子選擇器'不僅是子選擇器，'+'是'鄰接兄弟選擇器'。 –

喜你能試試這個代碼，實際上使你的CSS代碼a:hover + ul.one和我都給予了演示鏈接 demo

來源

2017-02-09 05:16:37

導航欄不顯示懸停的下拉內容（CSS）

回答

相關問題