html - 下拉导航栏并发症
问题描述
我不知道哪里出了问题,但我尝试的一切都没有让我的下拉菜单关闭并保持一个大块。任何人都可以告诉我我做错了什么,这样我就可以提醒问题以及我首先做错了什么?
我试图重做这一切,但无法弄清楚我是如何进入下拉安装的,以保持这样的开放状态。
body {font-family:'Lucida Grande', Helvetica, Arial, sans-serif;
padding:20px 50px 150px;
font-size:13px;
text-align:center;
background:#666;}
.navbar a {text-decoration:none;
color:#FF0004}
.navbar ul {text-align:left;
display:inline;
margin:0px;
padding:15px 4px 17px 0;
list-style:none;
-webkit-box-shadow:0 0 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow:0 0 5px rgba(0, 0, 0, 0.15);
box-shadow:0 0 5px rgba(0, 0, 0, 0.15);}
.navbar ul li {font:bold 12px/18px sans-serif;
display:inline-block;
margin-right:-4px;
postion:relative;
padding:15px 20px;
background:#fff;
cursor:pointer;
-webkit-transition:all 0.2s;
-moz-transition:all 0.2s;
-ms-transition:all 0.2s;
-o-transition:all 0.2s;
transition:all 0.2s;}
.navbar ul li:hover {background:#555;
color:#FFF;}
.navbar ul li ul {padding:0;
postion:absolute;
top:48px;
left:0;
width:150px;
visibility:hidden;
-webkit-transition:opacity 0.2s;
-moz-transition:opacity 0.2s;
-o-transition:opacity 0.2s;
-transition:opacity 0.2s;}
.navbar ul li ul li {backgound:#555;
display:block;
color:#FFF;
text-shadow:0 -01px 0 #000;}
.navbar li ul li:hover {backgound:#666;}
.navbar ul li ul li:hover ul {display:block;
opacity: 1;
visibility:visible;
}
<div class="navbar">
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="recepten.html">Recepten</a>
<ul>
<li><a href="lactosevrij.html">Lactosevrij</a></li>
<li><a href="suikervrij.html">Suikervrij</a></li>
<li><a href="glutenvrij.html">Glutenvrij</a></li>
</ul></li>
<li><a href="abonneren.html">Abonneren</a>
<ul>
<li><a href="basis.html">Basis</a></li>
<li><a href="standaard.html">Standaard</a></li>
<li><a href="luxe.html">Luxe</a></li>
</ul></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
解决方案
您有一些拼写错误,并且还针对错误的 ul。
body {
font-family: 'Lucida Grande', Helvetica, Arial, sans-serif;
padding: 20px 50px 150px;
font-size: 13px;
text-align: center;
background: #666;
}
.navbar a {
text-decoration: none;
color: #FF0004
}
.navbar ul {
text-align: left;
display: inline;
margin: 0px;
padding: 15px 4px 17px 0;
list-style: none;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
.navbar ul li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
/*position typo */
padding: 15px 20px;
background: #fff;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.navbar ul li:hover {
background: #555;
color: #FFF;
}
.navbar ul li ul {
padding: 0;
position: absolute;
/*position typo */
top: 48px;
left: 0;
width: 150px;
visibility: hidden;
-webkit-transition: opacity 0.2s;
-moz-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
.navbar ul li ul li {
background: #555;
display: block;
color: #FFF;
text-shadow: 0 -01px 0 #000;
}
.navbar li ul li:hover {
background: #666;
}
/* i refactored this selector */
.navbar ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
<div class="navbar">
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="recepten.html">Recepten</a>
<ul>
<li><a href="lactosevrij.html">Lactosevrij</a></li>
<li><a href="suikervrij.html">Suikervrij</a></li>
<li><a href="glutenvrij.html">Glutenvrij</a></li>
</ul>
</li>
<li><a href="abonneren.html">Abonneren</a>
<ul>
<li><a href="basis.html">Basis</a></li>
<li><a href="standaard.html">Standaard</a></li>
<li><a href="luxe.html">Luxe</a></li>
</ul>
</li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
推荐阅读
- python - 如何在 3D 图像上绘制坐标并显示它
- sql - 如何使用子查询中的子字符串更新和设置列值?
- javascript - 如何在正则表达式搜索中使用正斜杠?
- angular - 将 Angular 应用程序与 ReactJS 应用程序连接起来?
- r - 如何更快地数值求解 R 中的 ODE
- python-2.7 - 如何让不同的解析器在 pyparsing 中处理由 nestedExpr 标识的内容
- javascript - 传单地图无法在手机上正确显示
- mongodb - 在 MongoDB 中存储数据需要多少空间?
- qt - 如何在 PyQt5 中构建一个扁平的 groupbox?
- ios - 按下 tableview 单元格时如何添加深色?