导航栏不显示悬停下拉内容（CSS）

Question

嗨，我正在创建一个下拉菜单，其中一切正常。接受我隐藏下拉栏后，它再次显示在悬停上。任何人都可以帮助解决这里的问题。??

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 上移动时，我的实数阻止（下拉列表）没有显示。

Answer 1

它的下一个元素不是孩子。所以试试这个a:hover + ul.one

<强> css selector

<强>释

1. >用于儿童parent > child
2. +用于下一个元素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>

Answer 2

嗨，你可以尝试这段代码，实际上让你成为css代码a:hover + ul.one，我已经给出了演示链接 demo