当您将鼠标悬停在菜单本身上时，CSS 下拉菜单不会保持可见答案

【问题标题】：CSS dropdown menu won't stay visible when you hover over the menu itself当您将鼠标悬停在菜单本身上时，CSS 下拉菜单不会保持可见
【发布时间】：2013-10-23 18:54:49
【问题描述】：

是的，我知道：很多人以前都问过这个问题。无论出于何种原因，大多数有这个问题的论坛都有不同的解决方案。或者它们对我来说似乎不同（不太了解 CSS 效果如何工作的人）。

无论如何，我正在尝试使用 CSS 制作一个简单的下拉菜单。当您将鼠标悬停在圆顶图片上时，应该会下拉菜单。除了圆顶的图片外，其他链接都不应该有下拉菜单。当您将鼠标悬停在圆顶上时下拉菜单变为可见，但当您将鼠标悬停在菜单本身上时下拉菜单消失，使菜单无用。感谢您的帮助。

<!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>&nbsp;|&nbsp;</li>
    <li><a class="toolbarLink" href="http://inklitmag.uiowa.edu/about">About</a>&nbsp;|&nbsp;</li>
    <li><a class="toolbarLink" href="https://inklitmag.submittable.com/submit">Submit</a>&nbsp;|&nbsp;</li>
    <li><a class="toolbarLink" href="http://inklitmag.tumblr.com">Blink</a>&nbsp;|&nbsp;</li>
    <li><a class="toolbarLink" href="http://inklitmag.uiowa.edu/previousissues">Previous Issues</a></li>
</span>

</ul>
</div>
</body>
</html>

【问题讨论】：

不是在你的菜单上设置height:50px;，而是在li项目上设置它并去掉菜单上的高度声明。这样菜单的高度会在子菜单出现时自动扩展。现在它将保持在50px，当您离开该高度范围时，它不再激活悬停。
PlantThelda——谢谢，这很有意义。我尝试将它添加到 li、#toolbar li、ul 等。尚未在 Chrome 中工作。也许我做错了？

标签： css drop-down-menu menu

【解决方案1】：

菜单正在消失，因为您在滚动子菜单时将离开 li 标签。我会更改您的标记以使子菜单成为 li 的子 ul，这样当您将鼠标悬停在 li 上时，鼠标始终位于 li 中。

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

【讨论】：

谢谢！它现在会留下来；我只需要弄清楚如何正确定位它。无论出于何种原因，除非定位是静态的，否则它将不起作用。如果可以的话，我会投票给你，但遗憾的是我不能。
@user1743825 不用担心......很高兴我能帮助你。
@user1743825 您可能无法投票支持他，但您当然可以通过勾选复选标记来感谢他的回答

【解决方案2】：

你可以试试这样的。

CSS：

ul#primaryNav
{
padding:0;
}

ul#primaryNav > li 
{
display:block;
height:100px;
width:50px;
}

【讨论】：