CSS 下拉菜单链接无效

Question

我正在尝试获取一个下拉菜单来使用此按钮，到目前为止一切顺利，但是当我单击菜单并尝试单击其中一个 link 时，它会关闭下拉菜单而不是打开 link。有任何想法吗？（我知道有一种方法可以格式化此 post 让您能够在此浏览器中测试代码，但我不确定该怎么做）

<!doctype html>

<html>
    <head>
        <meta charset="UTF-8"/>
        <title>index</title>
        <link rel="stylesheet" type="text/css" href="css.css"/> 
    </head>
    <body>
        <nav class="nav-main">
            <ul>
                <li>
                    <a href="#" class="nav-item"><img src="images/resume btn.jpg"/></a>
                    <div class="nav-content">
                        <div class="nav-sub">
                            <ul>
                                <li><a href="www.google.com">Acting</a></li>
                                <li><a href="www.youtube.com">Choreographer/Dancer</a></li>
                            </ul>
                        </div>
                    </div>
                </li>

            </ul>   
        </nav>
    </body>
</html>

这是CSS

.nav-main .logo{
    height:40px;
    font-size:1.4em;
    line-height:40px;

}

.nav-main > ul{
    list-style-type:none;

}

.nav-main > ul > li{
    float:left;

}

.nav-content{
    overflow:hidden;
    background-color:tan;
    max-height:0;

}

.nav-content a{
color:black;
text-decoration:none;

}

.nav-content a:hover{
    text-decoration:underline;

}

.nav-sub ul{
    padding:0;
    margin:0;
    list-style-type:none;
}

.nav-sub ul li a{
    display:inline-block;
    padding:5px;
}

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

Answer 1

您不需要 css 中的“>”，例如：.nav-menu ul li - 还要确保您的链接在 www

之前有 http://

Answer 2

首先，对于如此简单的任务，您使用了太多元素。请使用此标记：

<nav class="nav-main">
    <ul>
        <li>Menu item 1
            <ul>
                <li><a href="http://google.com">Sub menu item 1</a></li>
                <li><a href="http://youtube.com">Sub menu item 2</a></li>
            </ul>
        </li>
    </ul>
</nav>

在此标记中使用此 css:

nav ul li ul{display: none; // or whatever code you want for hiding sub menu items}
nav ul li:hover ul{display: block; // or whatever code you want for showing sub menu items}

此外，有人已经提到您应该在链接中使用 'http://'，即使这不是强制性的。

你犯的另一个错误是在 img 标签内：

<img src="images/resume btn.jpg"/>

Space resume & btn 之间不是很酷。

希望对您有所帮助。

Answer 3

我已将问题与 max-height:0; 的问题隔离开来。如果您将其注释掉并单击子菜单选项，它应该重定向。

话虽如此，我不知道要更改什么才能使 max-height 正常工作。这是必需的，因为它将隐藏子菜单。您可能需要使用 jquery。

Answer 4

我遇到了同样的问题！我想你和我关注的是同一个视频，我查看了评论，有人发布了这段代码并且它有效！只需在其他 .nav-content 标记之后添加它！这让我连续两天发疯。

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

CSS 下拉菜单链接无效

CSS drop down menus links not working

html

css

hyperlink

drop-down-menu