导航栏不显示悬停的下拉内容（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我实数块（下拉）没有显示出来。

答

它的下一个元素不是孩子。所以试试这个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>

嘿感谢它的工作，你能解释一下我多一点为什么我们用这里+而不是> –

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

'>''立即子选择器'不仅是子选择器，'+'是'邻接兄弟选择器'。 –

答

喜你能试试这个代码，实际上使你的CSS代码a:hover + ul.one和我都给予了演示链接 demo

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

相关推荐