0

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

2 回答 2

4

菜单正在消失，因为您在滚动子菜单时将离开 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;
}
于 2013-06-07T18:26:08.147 回答
0

你可以尝试这样的事情。

CSS：

ul#primaryNav
{
padding:0;
}

ul#primaryNav > li 
{
display:block;
height:100px;
width:50px;
}
于 2013-06-07T19:23:31.537 回答