我希望法语下的“新闻”在:将鼠标悬停
在法语上时显示。
ul#topmenu li a#HyperLink:hover ul {
background-color: pink;
display: list-item;
}
<ul id="topmenu">
<li class="langHorzMenu">
<a href="#" id="HyperLink">French</a>
<ul id="Submenu" style="display:none;">
<li>
<a href="#">News</a>
</li>
</ul>
</li>
</ul>
当悬停在“法语”上时,您不能使用 JQuery 或 JS 来显示“新闻”。 您需要使用 ID。您可以添加新的 ID 或类名。 如何解决这个问题?
最佳答案
这对你有用:
只需将选择更改为 ul#topmenu li a#HyperLink:hover+ul
和 display: list-item !important;
即可正常工作。
ul#topmenu li a#HyperLink:hover+ul {
background-color: pink;
display: list-item !important;
}
<ul id="topmenu">
<li class="langHorzMenu">
<a href="#" id="HyperLink">French</a>
<ul id="Submenu" style="display:none;">
<li>
<a href="#">News</a>
</li>
</ul>
</li>
</ul>
if you are trying to get the
:hover
over the "News" you can also use the following:
通过添加
#Submenu:hover {
background-color: pink;
display: list-item !important;
}
在显示“新闻” 之后,如果您尝试:将鼠标悬停
在上方,它不会消失。
ul#topmenu li a#HyperLink:hover+ul {
background-color: pink;
display: list-item !important;
}
#Submenu:hover {
background-color: pink;
display: list-item !important;
}
<ul id="topmenu">
<li class="langHorzMenu">
<a href="#" id="HyperLink">French</a>
<ul id="Submenu" style="display:none;">
<li>
<a href="#">News</a>
</li>
</ul>
</li>
</ul>
关于html - 为什么将鼠标悬停在超链接上时不显示二级嵌套列表项?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49914023/