导航菜单不会展开

导航菜单不会展开

本文介绍了导航菜单不会展开的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

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;
}

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

08-19 19:37