Javascript 为什么当鼠标悬停在我的水平菜单上时，子菜单消失了

当我将鼠标悬停在它上面时，我有一个水平样式的菜单，试图将鼠标悬停在它的列表项和子菜单上，菜单就会消失

#主导航：之前，
#主导航：之后{
内容：“；
显示：表格；
}
#主导航{
缩放：1；
列表样式：无；
浮动：左；
保证金：0px 0px 0px 350px；
}
#主导航李{
浮动：左；
位置：相对位置；
填充：0px 5px 0px 5px；
光标：指针；
}
#主导航李a{
文本对齐：居中；
}
#主导航{
列表样式：无；
宽度：110px；
边际：0px；
填充：0px；
边框：实心；
可见性：隐藏；
位置：绝对位置；
顶部：50px；
左：0px；
z指数：1；
}
#主导航李：悬停>ul{
能见度：可见；
不透明度：1；
顶部：-3px；
}
#main_nav>li:悬停{
边框底部：纯红色；
}
#主导航>垂直导航：悬停>垂直导航{
顶部：30px；
}
#主导航ul{
左：110像素；
}

标题1

































标题2

































标题3

































标题4

































标题5

































标题6

































标题7

问题在于ul距离li太远，因此当您尝试达到悬停状态时，将禁用悬停状态

尝试以下CSS：

#main_nav:before,
#main_nav:after {
  content: "";
  display: table;
}
#main_nav {
  zoom: 1;
  list-style: none;
  float: left;
  margin: 0px 0px 0px 350px;
}
#main_nav li {
  float: left;
  position: relative;
  padding: 0px 5px 0px 5px;
  cursor: pointer;
}
#main_nav li a {
  text-align: center;
}
#main_nav ul {
  list-style: none;
  width: 110px;
  margin: 0px;
  padding: 0px;
  border: solid;
  visibility: hidden;
  position: absolute;
  top: 50px;
  left: 0px;
  z-index: 1;
}
#main_nav li:hover > ul {
  visibility: visible;
  opacity: 1;
  top: -3px;
}
#main_nav > li:hover {
  border-bottom: solid red;
}
#main_nav >li:hover > ul {
  top: 30px;
}
#main_nav ul ul {
  left: 110px;
}

/* To make the first li higher */
#main_nav > li:after {
  content: '';
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: 20px;
}
/* To make the li's inside ul wider */
#main_nav ul > li:after {
  content: '';
  position: absolute;
  top: 0;
  right: -50px;
  display: block;
  width: 50px;
  height: 20px;
}

---

问题是ul距离li太远，因此当您尝试达到悬停状态时，将禁用悬停状态

尝试以下CSS：

#main_nav:before,
#main_nav:after {
  content: "";
  display: table;
}
#main_nav {
  zoom: 1;
  list-style: none;
  float: left;
  margin: 0px 0px 0px 350px;
}
#main_nav li {
  float: left;
  position: relative;
  padding: 0px 5px 0px 5px;
  cursor: pointer;
}
#main_nav li a {
  text-align: center;
}
#main_nav ul {
  list-style: none;
  width: 110px;
  margin: 0px;
  padding: 0px;
  border: solid;
  visibility: hidden;
  position: absolute;
  top: 50px;
  left: 0px;
  z-index: 1;
}
#main_nav li:hover > ul {
  visibility: visible;
  opacity: 1;
  top: -3px;
}
#main_nav > li:hover {
  border-bottom: solid red;
}
#main_nav >li:hover > ul {
  top: 30px;
}
#main_nav ul ul {
  left: 110px;
}

/* To make the first li higher */
#main_nav > li:after {
  content: '';
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: 20px;
}
/* To make the li's inside ul wider */
#main_nav ul > li:after {
  content: '';
  position: absolute;
  top: 0;
  right: -50px;
  display: block;
  width: 50px;
  height: 20px;
}

---

你能评论或强调一下yoru css中的代码更改吗？哦，我是说，你减少了#main_nav ul中的顶部位置…看到了吗？这就是问题所在，我需要它再向下一点，字面上是50px。实际上，你能解释一下这里的逻辑吗？我只是用伪类“扩展”了li：after。尝试向我添加的选择器添加背景色，以了解其工作原理。这是一个肮脏的修复，但它是一个解决方案。好吧，明白了…但在此之前，我不必担心“连接”子菜单的li（即当你在子菜单中创建一个虚拟li时）。我以前不需要这样做，y现在？你能评论或强调一下yoru css中的代码更改吗？哦，I c，你减少了#main#u nav ul中的顶部位置…看到了吗？这就是问题，我需要它进一步向下，字面上是50px。实际上你能解释一下这里的逻辑吗？我只是用伪类“扩展”了li：after。尝试向我添加的选择器添加背景色，以了解其工作原理。这是一个肮脏的修复，但它是一个解决方案。好吧，明白了…但在此之前，我不必担心“连接”子菜单的li（即当你在子菜单中创建一个虚拟li时）。我以前不需要这么做，现在呢？