Question

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

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

我遇到了同样的问题！我想你和我都遵循同样的视频，我检查了评论，有人发布了这段代码，它的确有效！只需在其他.nav-content标记之后添加它！这让我连续两天疯狂。

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

Answer 2

你不需要＆＃34;＆gt;＆＃34;在css中，例如：.nav-menu ul li - 还要确保你的链接有http：// www之前

Answer 3

首先，你使用太多的元素来完成任务。请使用此标记：

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

另外，有人已经提到你应该使用＆＃39; http：//＆＃39;在链接中，即使它不是强制性的。

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

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

简历和＆amp;之间的空间btn真的很酷。

希望这会对你有所帮助。

Answer 4

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

据说，我不知道要改变什么来使max-height工作。它需要它，因为它将隐藏子菜单。您可能需要使用jquery。

CSS下拉菜单链接不起作用

4 个答案: