我正在为自己创建一个网站,并且正在按照编解码器的教程进行操作,当我完成时,我注意到按钮是不可点击的,因为当你点击时,下拉菜单就会消失。请帮忙?提前谢谢。
教程:https://www.youtube.com/watch?v=pYN8FUiKfzA 代码[HTML]:`
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="img/cLogo.png" />
<link rel="spreadsheets" href="styles/css/normalize.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="styles/css/global.css">
</head>
<body>
<header>
<nav class="nav-main">
<div class="logo">iTzPvPLyfe</div>
<a href="index.html" class="nav-item">Home</a>
<a href="#" class="nav-item">Apply</a>
<a href="#" class="nav-item nav-drop">dropdown</a>
<div class="nav-content">
<div class="nav-sub">
<ul>
<li><a href="skywars.html">Skywars</a></li>
<li><a href="#">Blitz SG</a></li>
</ul>
</div>
</div>
<a href="#" class="nav-item">About</a>
</nav>
</header>
<!-- -------------------------------------------------------------- -->
<section class="content">
<p>
Lorem Ipsum
</p>
</section>
<!-- -------------------------------------------------------------- -->
<footer>
</footer>
</body>
</html>
代码[SASS]:
.nav-main {
width: 100%;
background-color: $nav-background-color;
height: 70px;
color: $nav-foreground-color;
.logo {
float: left;
height: 40px;
padding: 15px 30px;
font-size: 1.4em;
line-height: 40px;
}
> ul {
@extend %plainlist;
float: left;
> li {
float: left;
}
}
}
.nav-item {
display: inline-block;
padding: 15px 20px;
height: 40px;
line-height: 40px;
color: $nav-foreground-color;
text-decoration: none;
&:hover {
background: $nav-hover-color;
}
}
.nav-drop {
&:focus {
background-color: $nav-hover-color;
~ .nav-content {
max-height: 400px;
@include transition(max-height, 0.4s, ease-in);
}
}
}
.nav-content {
margin-left: 345px;
position: absolute;
top: 70px;
overflow: hidden;
background-color: $nav-background-color;
max-height: 0;
a {
color: $nav-foreground-color;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
.nav-sub {
padding: 20px;
ul {
@extend %plainlist;
a {
display: inline-block;
}
}
}
答案 0 :(得分:0)
适合我。我认为你没有正确地包含mixins。由于您没有将它们包含在上面的代码段中,因此我转到了教程链接并手动包含它们。尝试检查顶部sass文件中是否包含mixin,如教程中所示。确保您的文件名匹配,并且您的mixins匹配。
你的sass应该转换为这个css。注意,我调整了颜色,你应该可以从这里拿走:
.nav-main {
width: 100%;
background-color: grey;
height: 70px;
color: white;
}
.nav-main .logo {
float: left;
height: 40px;
padding: 15px 30px;
font-size: 1.4em;
line-height: 40px;
}
.nav-main > ul {
margin: 0;
padding: 0;
list-style-type: none;
float: left;
}
.nav-main > ul > li {
float: left;
}
.nav-item {
display: inline-block;
padding: 15px 20px;
height: 40px;
line-height: 40px;
color: pink;
text-decoration: none;
}
.nav-item:hover {
background: orange;
}
.nav-drop:focus {
background-color: orange;
}
.nav-drop:focus ~ .nav-content {
max-height: 400px;
transition: max-height, 0.4s, ease-in;
}
.nav-content {
margin-left: 345px;
position: absolute;
top: 70px;
overflow: hidden;
background-color: orange;
max-height: 0;
}
.nav-content a {
color: blue;
text-decoration: none;
}
.nav-content a:hover {
text-decoration: underline;
}
.nav-sub {
padding: 20px;
}
.nav-sub ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.nav-sub ul a {
display: inline-block;
}