CSS dropdown menu won't stay visible when you

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).

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>&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>

回答1:

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

回答2:

You can try something like this.

CSS:

ul#primaryNav
{
padding:0;
}

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