Question

啊哈，我发现了这个问题。进一步向下的Html代码与我的菜单重叠。 Z-index和一些调整解决了它。请参阅以下更改。毫无疑问，CSS向导可以进一步改进，但这让我走上了正轨。

非常感谢大家的投入。

按照预期，鼠标悬停时，垂直菜单右侧会显示下拉选项。但是一旦我将鼠标移到右边进行选择，它们就会消失。有些灵魂可以指出我需要在下面的代码中做出哪些更改才能拥有功能齐全的垂直下拉菜单吗？

非常感谢，

LRP

我的css代码：

div.tools {
   padding: 0 0 0 0;
}

div.tools ul  {
   margin:  0;
   padding: 0;
   width: 9em;
   background: #00ab6f;
   color: white;
   border-radius: .3em;
}

.tools li {
   position: relative;
   list-style: none;
   margin: 0;
}

.tools ul ul {
   position: absolute;
   top: 0;
   left: 9em;
   display: none;
}

.tools ul li a {
   display: block;
   text-decoration: none;
   color: white;
   padding: .6em;
   border-radius: .3em;
}

.tools ul li:hover ul {
   display: block;
   z-index: 3;
}


.tools ul li ul li:hover {
    display: block;
    z-index: 3;
}

Answer 1

请注意，我找到了解决方案。见上面的编辑。

感谢所有人。

LRP

如何在垂直css下拉菜单中保持悬停？

1 个答案: