Dropdown Navbar故障排查：下拉菜单无法收起始终展开

嘿，我帮你找到了几个导致下拉菜单始终展开无法收起的关键问题，咱们逐一拆解并修正：

核心错误点 #

• position属性拼写错误：你在CSS里多次把position写成了postion（父级li和子菜单ul都犯了这个错），这直接导致下拉菜单的绝对定位失效，子菜单无法脱离正常文档流，只能一直跟在父菜单后面展开。
• background属性拼写错误：多处把background写成backgound，虽然不影响菜单展开逻辑，但会导致hover时的背景色效果不生效。
• 触发子菜单显示的选择器错误：原CSS里的.navbar ul li ul li:hover ul是针对三级菜单的触发逻辑，但你当前只有二级菜单，应该监听父级li的hover事件来显示子菜单。
• 子菜单初始状态的逻辑问题：原代码里子菜单仅设置了visibility:hidden，但配合过渡效果时，需要结合opacity和绝对定位来实现平滑显示/收起，同时避免占据页面空间。

修正后的完整CSS代码 #

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; /* 修正拼写错误 */
  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; /* 修正拼写错误 */
  top:48px; 
  left:0; 
  width:150px; 
  visibility:hidden; 
  opacity:0; /* 添加初始透明 */
  -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 ul li {
  background:#555; /* 修正拼写错误 */
  display:block; 
  color:#FFF; 
  text-shadow:0 -1px 0 #000; /* 修正阴影值的错误 */
}
.navbar ul li ul li:hover {
  background:#666; /* 修正拼写错误 */
}
/* 修正触发逻辑：父li hover时显示子菜单 */
.navbar ul li:hover ul {
  opacity:1; 
  visibility:visible;
}

修正说明 #

1. 所有拼写错误都已修正，确保position和background属性正常生效；
2. 调整了子菜单的过渡逻辑，同时使用opacity和visibility实现平滑的显示/收起动画；
3. 修正了子菜单的触发选择器，现在当鼠标悬停在父菜单（比如「Recepten」「Abonneren」）上时，子菜单会展开，鼠标离开后自动收起；
4. 还修正了子菜单text-shadow里的-01px错误，改成了-1px，确保阴影效果正常。

你的HTML代码没有问题，直接搭配修正后的CSS就能正常工作啦。

内容的提问来源于stack exchange，提问作者Webdesignerinclass