单击链接时纯 HTML/CSS 下拉菜单关闭（链接未打开）答案

【问题标题】：Pure HTML/CSS Drop Down Menu Closes When Clicking a Link (Link doesn't open)单击链接时纯 HTML/CSS 下拉菜单关闭（链接未打开）
【发布时间】：2016-06-20 06:52:43
【问题描述】：

我正在尝试学习 Web 开发，并且正在为我的一个网站开发布局。

我遵循了一个关于使用 HTML 和 CSS 构建广告下拉菜单的教程，只是因为我还没有真正接触过 JS，除了一个问题之外它运行良好。

当我单击下拉菜单中的链接时，它会关闭下拉菜单（这很好），但不会转到新页面。这是我的页面和代码。

    <!DOCTYPE html>
<html lang="en-US">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Rich Producer | Rich Sound</title>
        <meta name="Keywords" content="How to make beats, hip hop music production, rap music production, trap music production, download drum kits, download trap drums, massive presets, massive sound bank, trap sample pack, music production tutorials">
        <meta name="Description" content="Only the best drum kits, loop packages, massive presets, tutorials, and more for hip hop and trap music producers.">
        <link rel="stylesheet" type="text/css" href="css/normalize.css">
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <link href='https://fonts.googleapis.com/css?family=Alfa+Slab+One' rel='stylesheet' type='text/css'>
        <link href='https://fonts.googleapis.com/css?family=Shadows+Into+Light+Two' rel='stylesheet' type='text/css'>


    </head>

    <body>
        <div id="body-background">
            <nav class="container" id="nav">
                <div class="row">

                    <div class="col-12 no-pad">
                        <a href="index.html" id="logolink"><div id="logo"><h1>Rich Producer</h1><h5 id="slogan">When Only the Best Will Do. . .</h5></div></a>

                            <ul id="navlist" class="nav">
                                <li class="nav-item dropdown">
                                    <a href="#"> Drum Kits </a>
                                    <div class="dropdown-container">
                                        <div class="dropdown-inner">
                                            <ul class="dropdown-menu">
                                                <li class="dropdown-menu-item">
                                                    <a href="#">808 &amp; Trap Kits</a>
                                                </li>
                                            </ul>
                                        </div><!-- END DROP INNER -->
                                    </div><!-- END DROP CONTAINER -->
                                </li>

                                <li class="nav-item dropdown">
                                    <a href="#"> Presets &amp; Loops </a>
                                    <div class="dropdown-container">
                                        <div class="dropdown-inner">
                                            <ul class="dropdown-menu">
                                                <li class="dropdown-menu-item">
                                                    <a href="#">Ni Massive Presets</a>
                                                </li>
                                                <li class="dropdown-menu-item">
                                                    <a href="#">Loop Packs</a>
                                                </li>
                                            </ul>
                                        </div><!-- END DROP INNER -->
                                    </div><!-- END DROP CONTAINER -->               
                                </li>

                                <li class="nav-item dropdown">
                                    <a href="#"> Motivation </a>
                                    <div class="dropdown-container">
                                        <div class="dropdown-inner">
                                            <ul class="dropdown-menu">
                                                <li class="dropdown-menu-item">
                                                    <a href="beat-making-videos.html">Beat Making Videos</a>
                                                </li>
                                                <li class="dropdown-menu-item">
                                                    <a href="#">Producer Interviews</a>
                                                </li>
                                                <li class="dropdown-menu-item">
                                                    <a href="#">Music Production Tutorials</a>
                                                </li>
                                            </ul>
                                        </div><!-- END DROP INNER -->
                                    </div><!-- END DROP CONTAINER -->
                                </li>

                                <li class="nav-item"><a href="#"> Contact </a></li>

                            </ul>
                    </div><!--END NAVCOLUMN -->


                </div><!-- END ROW 1 (NAVIGATION) -->
            </nav>

            <div class="container content">
                <div class="row">
                    <div class="col-8">
                        <h1 class="text-center">Music Production Drum Kits, Synth Presets, Sound Packs, Tutorials and More!</h1>
                        <hr>
                        <p class="mainpagepitch">From sounds to video tutorials, to the best producers making beats, Rich Producer has it all.<br>

                            Did we mention that we only post the best stuff?<br> That way you don't have to search through junk sounds and videos.<br>

                            Take a look around the site and find out more.<br>

                            With our help, you don't have to be a rich producer to sound like one.<br>
                        </p><hr>                
                    </div><!-- END COLUMN 1 of ROW 2 (Main Content)-->

                    <div class="col-4">
                        <h3 class="text-center">No spam - Ever!</h3>

                        <!-- Begin MailChimp Signup Form -->
                        <div id="mc_embed_signup">
                            <form action="//learncalculusfree.us12.list-manage.com/subscribe/post?u=56d231ceb905ccf52ff5b6d5b&amp;id=b623db0c1c" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
                                <div id="mc_embed_signup_scroll">
                                    <label for="mce-EMAIL">Enter your email and Rich Producer will send you:                            
                                    </label><br>

                                        <img src="img/LoudPackCover-thumb.png" alt="50 Free Massive Patches and Massive Presets" class="img-responsive img-center">

                                        <ul id="signup-list" class="text-center">
                                                <li>-50 Free Massive Presets (delivered instantly) </li> 
                                                <li>-In depth, high quality tutorials and beat breakdowns </li>
                                                <li>-Free drum kits so hot they'll burn your finger tips! </li>
                                        </ul>
                                        <div class="text-center">
                                            <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
                                            <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
                                            <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_56d231ceb905ccf52ff5b6d5b_b623db0c1c" tabindex="-1" value=""></div>
                                            <div class="clear"><input type="submit" value="Submit" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
                                        </div><!-- END CENTER FOR BUTTON AND INPUT -->
                                </div>
                            </form>
                        </div><!--End mc_embed_signup-->
                    </div><!-- end signup column -->
                </div><!--END ROW 2 (CONTENT) -->








            </div><!-- END CONTAINER -->
        </div><!--END BODY-BACKGROUND -->
    </body>
</html>

CSS

    body{
    /*smin-height: 900px;*/
}

#body-background{
    background-image: url("../img/studiobg.jpg");
    background-size: 100%;
    min-height: 1916px;
    background-attachment: fixed;
}

.container{
    width: 100%;
    max-width: 1200px;
    margin: auto;
    background-color: rgba(255,255,255,.9);

}
/* PUSHES CONTENT DOWN TO MAKE GAP FROM NAV BAR */
.content{
    margin-top: 12px;
}

.text-center{
    text-align: center;
}

.row::before, .row::after{
    content: "";
    display: table;
    clear: both;
}

[class*='col-'] {
    float: left;
    min-height: 1px;
    width: 8.33%;
    /*-- our gutter --*/
        padding: 12px;
}

.no-pad{
    padding: 0px;
}

.col-1{width: 8.33%;}

.col-2{ width: 16.66%;}

.col-3{ width: 21.99%;}

.col-4{ width: 33.32%;}

.col-5{ width: 41.65%;}

.col-6{ width: 49.98%;}

.col-7{ width: 58.31%;}

.col-8{ width: 66.64%;}

.col-9{ width: 74.97%;}

.col-10{width: 83.3%;}

.col-11{width: 91.63%;}

.col-12{width: 100%;}

.container *{
    box-sizing: border-box;
}

@media all and (max-width: 800px){
    .col-1{ width: 16.66%;}
    .col-2{ width: 33.32%;}
    .col-3{ width: 66.64%;}
    .col-4{ width: 100%;}
    .col-5{ width: 100%;}
    .col-6{ width: 100%;}
    .col-7{ width: 100%;}
    .col-8{ width: 100%;}
    .col-9{ width: 100%;}
    .col-10{ width: 100%;}
    .col-11{ width: 100%;}
    .col-12{ width: 100%;}
}

@media all and (max-width: 650px){
.col-1{width: 50%;}
.col-2{width: 100%;}
.col-3{width: 100%;}
.col-4{width: 100%;}
.col-5{width: 100%;}
.col-6{width: 100%;}
.col-7{width: 100%;}
.col-8{width: 100%;}
.col-9{width: 100%;}
.col-10{width: 100%;}
.col-11{width: 100%;}
.col-12{width: 100%;}
}

/************
STLYE NAVIGATION LOGO 
************/


div#logo{
    text-align: center;
    color: #333;
}

#logolink{
    font-family: 'Alfa Slab One', cursive;
    font-size: 2em;
    text-decoration: none;
    color: black;
    display: block;
    padding: 20px 0px 20px;

}

#slogan{
    font-size: .8em;
    font-family: 'Shadows Into Light Two', cursive;
}
/************
START NAV LINK GROUP
*************/

#navlist {
    list-style-type: none;
    margin: 0px 0px 0px 0px;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

#navlist>li{
    float: left;
}

#navlist li a{
    display: block;
    color: #ddd;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

#navlist li:last-child{
    border-right: none;
}

/* Change the link color to #111 (black) on hover */
li a:hover {
    background-color: #111;
}

/* Sets active link color to #111 (black)        */
.active{
    background-color: #111;
}

/* DROP STYLING */

.dropdown-container{
    position: absolute;
    max-height: 0;
    overflow: hidden;
    background: #333;
}

ul.dropdown-menu{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.dropdown-menu li a{
    display: inline-block;
    min-width: 200px;
    border-bottom: 1px solid #111;
}

.dropdown a:focus{
    background-color: #111;
}

.dropdown a:focus ~ .dropdown-container{
    max-height: 500px;
    transition: max-height 0.5s ease-in;
    -webkit-transition: max-height 0.5s ease-in;
    -mox-transition: max-height 0.5s ease-in;
}

/*END NAV STYLING*/

.mainpagepitch{
    line-height: 200%;
}

#signup-list{
    list-style-type: none;
    padding: 0;
    line-height: 170%;
}

#signup-list li{
    margin-left: 8px;
}

h1, h2, h3, h4, h5, h6, p, ul, label{
    color: #333;
}

/****************
RESPONSIVE IMG
****************/

.img-responsive{
    max-width: 100%
    height: auto;
}

.img-center{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

https://jsfiddle.net/fy0cmkmt/

** 目前我只链接到 Motivation > Beat Making Videos 下的页面，但我想你可以看出它甚至没有尝试打开链接。

【问题讨论】：

*** 解决方案 *** 而不是点击我做悬停。我可能会学习 JS 并在以后更改它。我改变了最大高度：0px；显示：无；然后我对导航部分的最后一点 css 进行了一些更改。以下是这些更改： .dropdown a:hover + .dropdown-container, .dropdown-container:hover{ display: block;过渡：最大高度 0.5s 缓入； -webkit-transition：最大高度 0.5s 缓入； -mox-transition：最大高度 0.5s 缓入； }

标签： html css menu dropdown

【解决方案1】：

是的，它不起作用，因为在您按下鼠标的那一刻，它会触发一个onmousedown 事件，这会使“动机”<a> 标记失去焦点，从而使下拉菜单折叠，隐藏所需的链接。该链接仅在您可以在其上完成 mousedown 和 mouseup 事件（结合到 mousepress 事件中）时才有效。

简而言之，纯 CSS 的点击下拉菜单是不可能的。我建议尝试 :hover menu。

【讨论】：

所以您建议我将 :focus 更改为 :hover？我通过从 max-height: 0 更改为 display: none 并将最后一个 css 更改为 .dropdown a:hover + .dropdown-container, .dropdown-container:hover{ display: block;过渡：最大高度 0.5s 缓入； -webkit-transition：最大高度 0.5s 缓入； -mox-transition：最大高度 0.5s 缓入； }