我正在制作菜单,但是链接有问题。
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 +单击]的链接来测试链接
“搜索”框正在工作,但是,如果单击“其他”->“指令”,则什么都没有发生。
我认为 Extra的中的链接阻止了它正常工作。
但是如果没有“ Extras ”作为链接,则菜单将不会展开。
最佳答案
添加此规则,以便该元素是可单击的:
.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>
关于css - 一些href链接没有响应,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/31703511/