CSS 下拉菜单在我单击之前关闭 [英] CSS dropdown menu closes before I click
本文介绍了CSS 下拉菜单在我单击之前关闭的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个带有子菜单的 CSS 下拉导航菜单.我的问题是子菜单在我点击它之前关闭.当我将光标移动到子菜单的一半时，它消失了.例如，当我移动鼠标单击Item 3 sub 1.1"时，它消失了.
主下拉菜单工作正常，但子菜单有问题.
我该怎么做才能让子菜单保持到我点击它?...感谢您的帮助
这是我的菜单 CSS:
.nav {填充:0px；文本对齐:居中；边框:0px；垂直对齐:中间；显示:表格行；宽度:100%；边距:0px 自动；背景色:#660000；溢出:隐藏；位置:相对；高度:30；文本对齐:居中；边距:0px 自动 0px 自动；}ul{列表样式:无；填充:0px；边距:0px；向左飘浮;显示:内联；}乌利{显示:块；位置:相对；向左飘浮;左:85px；}律{显示:无；保证金:0;}乌利阿{显示:块；背景:#660000；填充:5px 10px 5px 10px；文字装饰:无；空白:nowrap；颜色:#fff;左边框:1px 实心 #660000;右边框:1px 实心 #660000;}ul li a:悬停{背景:#3300cc；显示:块；}li:悬停ul {位置:固定；显示:块；}李:悬停李{浮动:无；}li:悬停一个{背景:#3300cc；}li:hover li a:hover {背景:#660000；}.drop-nav li ul li {边框顶部:0px；z-索引:100；边框底部:0;右:0;左:0;}li li:悬停一个{显示:块；}li li ul a {边距顶部:-25px；底边距:25px；左边距:85px；显示:无；}li:hover li:hover ul li a:hover {边距顶部:-25px；底边距:25px；左边距:85px；溢出:无；}这是html:
解决方案
您的 css 选择器非常混乱.只在下一行使用 ul li 和 li ul 或 li li ul a 太含糊了，并没有真正针对元素.虽然这种方法可能适用于一层深的嵌套，但当您开始嵌套 2 层深时，它会严重混淆(对于浏览器).
我会给每个 UL 元素一个特定的描述类，您可以精确定位.
此外，为您的 UL 使用 position 属性，不要忘记在菜单重叠时考虑 z-index.
像这样的东西，不是很漂亮，但它的工作方式符合您的预期.
<html lang="zh-cn"><头><meta charset="UTF-8"><title>文档</title><风格>.nav {位置:相对；顶部:0；宽度:80%；高度:自动；边框:1px 实心 #e6e6e6;边距:0 自动；font-family: 'Helvetica', Arial, sans-serif;}/* 根级 */.下拉式菜单 {位置:相对；顶部:0；左:0；填充:0；边距:0；背景:#eeeeee；}/* 清除浮动 */.下拉菜单:后{显示:表；内容: "";清楚:两者；}.dropdown-menu li {显示:块；左边框:1px 实心 #e6e6e6;右边框:1px 实心 #e6e6e6;最小宽度:150px；向左飘浮;}.dropdown-menu li a:link,.dropdown-menu li a:visited {填充:10px 15px；文字装饰:无；颜色:#111111；显示:块；}.dropdown-menu li a:hover,.dropdown-menu li a:focus {颜色:#222222；}/* 1级 */.dropdown-level-1 {位置:绝对；填充:0；边距:0；显示:无；背景:灰色；宽度:150px；}.dropdown-level-1 li {}/* >"触发直接子节点显示为块"*/.dropdown-menu li:hover >.dropdown-level-1 {显示:块；}/* 级别 2 */.dropdown-level-2 {位置:绝对；显示:无；背景:#888888；填充:0；边距:-38px 0 0 148px；}/* 2 级的相同技巧 */.dropdown-level-1 li:hover >.dropdown-level-2 {显示:块；}/* 一次定位所有链接 */.dropdown-level-0 li a:link,.dropdown-level-0 li a:visited,.dropdown-level-1 li a:link,.dropdown-level-1 li a:visited,.dropdown-level-2 li a:link,.dropdown-level-2 li a:visited {填充:10px；颜色:紫色；显示:块；}.dropdown-level-0 li a:hover,.dropdown-level-0 li a:focus,.dropdown-level-1 li a:hover,.dropdown-level-1 li a:focus,.dropdown-level-2 li a:hover,.dropdown-level-2 li a:focus {颜色为橙色;}</风格><身体><div class="nav"><ul class="下拉菜单"><li><a href="#">项目 1</a></li><li class="dropdown"><a href="#">项目 2</a><ul class="dropdown-level-1"><li><a href="#">项目 2 子 2</a><ul class="dropdown-level-2"><li><a href="#">项目 2 sub 1</a></li><li><a href="#">项目 2 sub 1</a></li><li><a href="#">Item 2 sub 2</a></li><li><a href="#">项目 2 子 2</a><ul class="dropdown-level-2"><li><a href="#">项目 2 sub 1</a></li><li><a href="#">项目 2 sub 1</a></li><li><a href="#">Item 2 sub 2</a></li><li><a href="#">项目 2 子 2</a><ul class="dropdown-level-2"><li><a href="#">项目 2 sub 1</a></li><li><a href="#">项目 2 sub 1</a></li><li><a href="#">Item 2 sub 2</a></li><li class="dropdown"><a href="#">项目 2</a><ul class="dropdown-level-1"><li><a href="#">项目 2 sub 1</a></li><li><a href="#">项目 2 sub 1</a></li><li><a href="#">项目 2 子 2</a><ul class="dropdown-level-2"><li><a href="#">项目 2 sub 1</a></li><li><a href="#">项目 2 sub 1</a></li><li><a href="#">Item 2 sub 2</a></li><li class="dropdown"><a href="#">项目 2</a><ul class="dropdown-level-1"><li><a href="#">项目 2 sub 1</a></li><li><a href="#">项目 2 sub 1</a></li><li><a href="#">项目 2 子 2</a><ul class="dropdown-level-2"><li><a href="#">项目 2 sub 1</a></li><li><a href="#">项目 2 sub 1</a></li><li><a href="#">Item 2 sub 2</a></li><li class="dropdown"><a href="#">项目 2</a><ul class="dropdown-level-1"><li><a href="#">项目 2 sub 1</a></li><li><a href="#">项目 2 sub 1</a></li><li><a href="#">第 2 项子 2 </a></li>