一些href链接没有响应答案

【问题标题】：Some href links are not responding一些href链接没有响应
【发布时间】：2015-10-20 14:45:14
【问题描述】：

我正在制作菜单，但链接有问题。

body,html{
            margin:0;
            font:1em "open sans",sans-serif;
        }

        /**************/
        /*  MENU BAR  */
        /**************/


        .nav-main{
            width:100%;
            background-color:#222;
            height:70px;
            color:#fff;
            padding-left: 33%;
            padding-right: 33%;
        }

        .nav-main > ul{
            margin:0;
            padding:0;
            float:left;
            list-style-type:none;
        }
        .nav-main > ul > li{
            float:left;
        }
        .nav-item{
            display:inline-block;
            padding:15px 20px;
            height:40px;
            line-height:40px;
            color:#fff;
            text-decoration:none;
        }
        .nav-item:hover {
            background-color:#444;
        }
        .nav-content{
            position:absolute;
            top:70px;
            overflow:hidden;
            background-color:#222;
            max-height:0;
        }
        .nav-content a{
            color:#fff;
            text-decoration:none;
        }
        .nav-content a:hover{
            text-decoration:underline;
        }
        .nav-sub{
            padding:20px;
        }
        .nav-sub ul{
            padding:0;
            margin:0;
            list-style-type:none;
        }
        .nav-sub ul li a{
            display:inline-block;
            padding:5px 0;
        }
        .nav-item:focus{
            background-color:#444;
        }
        .nav-item:focus ~ .nav-content{
            max-height:400px;
            -webkit-transition:max-height 400ms ease-in;
            -moz-transition:max-height 400ms ease-in;
            transition:max-height 400ms ease-in;

        }

<nav class="nav-main">
    <ul>
        <li>
            <a href="http://www.google.com" class="nav-item">Search</a>
        </li>

        <li>
            <a href="#" class="nav-item">Extra's</a>
            <div class="nav-content">
                <div class="nav-sub">
                    <ul>
                        <li><a href="http://www.google.com">Instructions</a> </li>
                    </ul>
                </div>
            </div>
        </li>
    </ul>
</nav>

使用 [ctrl + click] 尝试链接以测试链接

“搜索”框正在工作，但如果您点击“附加”-->“说明”，则什么也没有发生。

我认为 Extra's 中的链接阻止了它的工作。但是如果没有“Extras”作为链接，菜单不会展开。

【问题讨论】：

标签： css hyperlink menu href

【解决方案1】：

添加这条规则，使元素可点击：

.nav-item:focus ~ .nav-content,
.nav-content:hover {
    max-height:400px;
    -webkit-transition:max-height 400ms ease-in;
    -moz-transition:max-height 400ms ease-in;
    transition:max-height 400ms ease-in;
}

这是因为，您已在focus 上分配了该事件，当您尝试单击该链接时它会熄灭。

body,html{
            margin:0;
            font:1em "open sans",sans-serif;
        }

        /**************/
        /*  MENU BAR  */
        /**************/


        .nav-main{
            width:100%;
            background-color:#222;
            height:70px;
            color:#fff;
            padding-left: 33%;
            padding-right: 33%;
        }

        .nav-main > ul{
            margin:0;
            padding:0;
            float:left;
            list-style-type:none;
        }
        .nav-main > ul > li{
            float:left;
        }
        .nav-item{
            display:inline-block;
            padding:15px 20px;
            height:40px;
            line-height:40px;
            color:#fff;
            text-decoration:none;
        }
        .nav-item:hover {
            background-color:#444;
        }
        .nav-content{
            position:absolute;
            top:70px;
            overflow:hidden;
            background-color:#222;
            max-height:0;
        }
        .nav-content a{
            color:#fff;
            text-decoration:none;
        }
        .nav-content a:hover{
            text-decoration:underline;
        }
        .nav-sub{
            padding:20px;
        }
        .nav-sub ul{
            padding:0;
            margin:0;
            list-style-type:none;
        }
        .nav-sub ul li a{
            display:inline-block;
            padding:5px 0;
        }
        .nav-item:focus{
            background-color:#444;
        }
        .nav-item:focus ~ .nav-content, .nav-content:hover {
            max-height:400px;
            -webkit-transition:max-height 400ms ease-in;
            -moz-transition:max-height 400ms ease-in;
            transition:max-height 400ms ease-in;

        }

<nav class="nav-main">
    <ul>
        <li>
            <a href="http://www.google.com" class="nav-item">Search</a>
        </li>

        <li>
            <a href="#" class="nav-item">Extra's</a>
            <div class="nav-content">
                <div class="nav-sub">
                    <ul>
                        <li><a href="http://www.google.com">Instructions</a> </li>
                    </ul>
                </div>
            </div>
        </li>
    </ul>
</nav>

【讨论】：

【解决方案2】：

添加到你的 CSS

.nav-content:hover{
  max-height:400px;
}

因为焦点.nav-item时nav-content的最大高度只有400px，如果您点击其他站点.nav-content失去最大高度并且您没有点击链接

【讨论】：