当您将鼠标悬停在菜单本身上时，CSS下拉菜单不会保持可见 [英] CSS dropdown menu won't stay visible when you hover over the menu itself
问题描述
是的，我知道：很多人以前问过这个问题。不管什么原因，大多数有这个问题的论坛有不同的解决方案。或者他们似乎不同于我（有人不太理解CSS效果如何工作）。
Yes, I know: Many have asked this question before. For whatever reason, most of the forums with this question have different solutions. Or they seem different to me (someone who doesn't quite understand how the CSS effects work).
无论如何，我想用CSS做一个简单的下拉菜单。当您将鼠标悬停在圆顶的图片上时，菜单应该会下降。没有其他链接应该有一个下拉菜单，除了圆顶的图片。当您将鼠标悬停在圆顶上时，下拉菜单会变为可见，但当您将鼠标悬停在菜单本身上时，该菜单会消失，从而使菜单无用。感谢您的帮助。
Anyways, I'm trying to make a simple dropdown menu with CSS. When you hover over a picture of a dome, a menu should drop down. No other link should have a dropdown menu except for the picture of the dome. The dropdown menu becomes visible when you hover over the dome but disappears when you hover over the menu itself, rendering the menu useless. Thanks for your help.
<!DOCTYPE html>
<html>
<header>
<title>Ink Lit Mag</title>
<link href="http://fonts.googleapis.com/css?family=Alef" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Della+Respira' rel='stylesheet' type='text/css'>
<style>
/*Toolbar*/
#toolbar
{
position:fixed;
top:0px;
left:0px;
width:100%;
height:50px;
background-color:#000000;
}
#toolbar li
{
list-style-type:none;
float:left;
}
#toolbarText
{
position:fixed;
top:12px;
left:100px;
color:#ffffff;
font-family: "Alef", sans-serif;
font-size:20px;
}
#dome
{
position:fixed;
top:8px;
left:5px;
width:28px;
height:33.3333333333;
}
/*Toolbar link effects*/
a.toolbarLink:link
{
color:#ffffff;
text-decoration:none;
}
a.toolbarLink:hover
{
color:#ffffff;
}
a.toolbarLink:visited
{
color:#ffffff;
}
a.toolbarLink:active
{
color:#ffffff;
}
/*Menu*/
#toolbar .subnav
{
display:none;
position: absolute;
top:50px;
left:0px;
width:85px;
padding-left:5px;
padding-right:5px;
padding-top:5px;
padding-bottom:0px;
background-color:#c0c0c0;
}
ul#primaryNav li:hover .subnav
{
display:block;
}
/*Menu link effects*/
a.menuLink:link
{
color:#ffffff;
text-decoration:none;
}
a.menuLink:hover
{
color:#ffffff;
background-color:#000000
}
a.menuLink:visited
{
color:#ffffff;
}
a.menuLink:active
{
color:#ffffff;
}
</style>
</header>
<body>
<div id="toolbar">
<ul id="primaryNav">
<li>
<a class="toolbarLink" id="domeLink" href="http://uiowa.edu"><img id="dome" src="dome.jpg"></img></a>
<ul class="subnav" id="subnav">
<li><a class="menuLink" href="http://uiowa.edu">Iowa</a></li><br />
<li><a class="menuLink" href="http://clas.uiowa.edu">CLAS</a></li><br />
<li><a class="menuLink" href="http://magidcenter.uiowa.edu">Magid Center</a></li><br />
</ul>
</li>
<span id="toolbarText">
<li><a class="toolbarLink" href="http://inklitmag.uiowa.edu">Home</a> | </li>
<li><a class="toolbarLink" href="http://inklitmag.uiowa.edu/about">About</a> | </li>
<li><a class="toolbarLink" href="https://inklitmag.submittable.com/submit">Submit</a> | </li>
<li><a class="toolbarLink" href="http://inklitmag.tumblr.com">Blink</a> | </li>
<li><a class="toolbarLink" href="http://inklitmag.uiowa.edu/previousissues">Previous Issues</a></li>
</span>
</ul>
</div>
</body>
</html>
推荐答案
菜单正在消失，当你去滚动通过子菜单。我会改变你的标记，使子菜单成为一个子菜单，使鼠标总是在你的鼠标悬停在它上面。
The menu is disappearing because you are leaving the li tag when you go to scroll through the submenu. I would change your markup to make the submenu a sub ul of the li so that the mouse is always in the li when you hover over it.
HTML：
<ul>
<li id="domeLink">
<a href="http://uiowa.edu"><img src="dome.jpg" /></a>
<ul id="submenu">
<li>Menu Item 1</li>
<li>Menu Item 2</li>
</ul>
</li>
</ul>
CSS：
ul ul {
display:none;
}
#domeLink:hover > ul {
display:block;
}
这篇关于当您将鼠标悬停在菜单本身上时，CSS下拉菜单不会保持可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
