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 にあるようにします。

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 に答える