导航菜单不会展开 [英] nav menu won't expand

问题描述

我有一个垂直导航菜单，我想在某些元素悬停时显示不同级别的菜单。问题是我使用的方法不起作用，我不明白为什么。当我将鼠标悬停在产品上时，我希望看到子菜单展开，但没有任何反应。为什么？

HTML：

 < nav> 
< ul> 
< li>< a href =./ index.html>主页< / a>< / li> 
< li>< a href =./ about.html>关于< / a>< / li> 
< li>< a href =./ product.html>产品< / a>< / li> 
< ul> 
< li>< a href =＃>蓝莓< / a>< / li> 
< li>< a href =＃> Rasberries< / a>< / li> 
< li>< a href =＃>草莓< / a>< / li> 
< / ul> 
< li>< a href =./ contact.html>联络人< / a>< / li> 
< / ul> 
< / nav> 
  

CSS：

  nav {
 border：1px纯红色; 
} 
 nav ul ul {
 display：none; 
} 
 nav ul li：hover> ul {
 display：block; 
 
  

解决方案

您的代码：

  nav ul li：hover> ul {
 display：block; 
} 
  

意思是在一个盘旋的li显示内：做任何ul：块。你的子菜单不在LI内，它在后面。 这是您正在尝试做的工作版本。

工作HTML：

 < li>< a href =./ product.html>产品< / A> 
< ul> 
< li>< a href =＃>蓝莓< / a>< / li> 
< li>< a href =＃> Rasberries< / a>< / li> 
< li>< a href =＃>草莓< / a>< / li> 
< / ul> 
< / li> 
  

工作CSS：

  nav ul li ul {
 display：none; 
} 
 nav ul li：hover ul {
 display：block; 
} 
  

I have a vertical navigation menu and I want to show different levels of the menu upon hovering of certain elements. The problem is that the method I used is not working and I do not understand why. When I hover over "Product", I expect to see a sub-menu expand, but nothing happens. Why?

HTML:

<nav>
<ul>
<li><a href="./index.html">Home</a></li>
<li><a href="./about.html">About</a></li>
<li><a href="./product.html">Product</a></li>
       <ul>
       <li><a href="#">Blueberries</a></li>
       <li><a href="#">Rasberries</a></li>
       <li><a href="#">Strawberries</a></li>
       </ul>
<li><a href="./contact.html">Contact</a></li>
</ul>
</nav>

CSS:

nav {
border:1px solid red;
}
nav ul ul {
display:none;
}
nav ul li:hover > ul {
display:block;
}

解决方案

Your code:

nav ul li:hover > ul {
    display:block;
}

Means "Make any ul within a hovered li display:block". Your submenu is not within the LI, it's after it. Here's a working version of what you were trying to do.

Working HTML:

<li><a href="./product.html">Product</a>
       <ul>
       <li><a href="#">Blueberries</a></li>
       <li><a href="#">Rasberries</a></li>
       <li><a href="#">Strawberries</a></li>
       </ul>
</li>

Working CSS:

nav ul li ul {
    display:none;
}
nav ul li:hover ul {
    display:block;
}

这篇关于导航菜单不会展开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！