Question

是的，我知道：很多人之前都问过这个问题。无论出于何种原因，大多数有这个问题的论坛都有不同的解决方案。或者它们对我来说似乎不同（有些人不太明白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>

Answer 1

菜单正在消失，因为当您滚动子菜单时，您将离开li标签。我会更改你的标记，使子菜单成为li的子ul，这样当你将鼠标悬停在它上面时鼠标总是在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;
}

Answer 2

你可以尝试这样的事情。

CSS：

ul#primaryNav
{
padding:0;
}

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

当您将鼠标悬停在菜单上时，CSS下拉菜单将无法保持可见状态

2 个答案: