css - 菜单下拉显示在错误的位置

Question

我已经为此浪费了 5 个小时。

还有第二个菜单。当您将鼠标悬停在某个元素上时，下拉菜单位于错误的位置。

请帮忙。

这是 CSS。

/* MY RIGGING MENU*/
#menu-rigging-menu {
border-bottom: 5px solid #EDEDED;
display:inline-block !important;  
text-align:left;
width: 100%;
list-style: none;
}
#menu-rigging-menu ul {
margin:0;
text-indent:0;
}

#menu-rigging-menu a li, #menu-rigging-menu a  {
display: inline-block;
text-decoration: none;
float: left;
background: #ededed;
margin: 0px 10px; 
}
#menu-rigging-menu li a {
color: #000000;
line-height: 38px;
padding: 0 10px;
}

#menu-rigging-menu li a:hover {
  color: red;
}
#menu-rigging-menu li {
margin: 0 2.85714rem 0 0;
position: relative;
list-style: none outside none;
}
#menu-rigging-menu li ul {
display: none;
position: absolute;
top: 43px;
z-index: 1;
margin:0;
padding:0;
 }
 #menu-rigging-menu li ul ul {
left: 100%;
  top: 0;
 }

#menu-rigging-menu li:hover > ul {
border-left: 0 none;
display: inline-block;
 }

 #menu-rigging-menu ul li a {
background: none repeat scroll 0 0 #EFEFEF;
border-bottom: 1px solid #EDEDED;
display: block;
font-size: 0.785714rem;
line-height: 2.18182;
padding: 0.571429rem 0.714286rem;
white-space: normal;
width: 12.8571rem;
/*  position:relative;  */
}


#menu-rigging-menu li ul li a:hover {
background: none repeat scroll 0 0 #E3E3E3;
  color: #444444;
}
#menu-rigging-menu .current-menu-item > a, #menu-rigging-menu .current-
menu-ancestor      >     a, #menu-rigging-menu .current_page_item > a, #menu-
rigging-menu .current_page_ancestor > a {
color: #636363;
font-weight: bold;
 }

Answer 1

1- CSS 解析器似乎没有将您的菜单项解释为水平并排对齐。通常列表项显示在彼此下方。不管是什么原因，让它们向左浮动以修复子菜单相对于父菜单项的定位。

#menu-rigging-menu > li {
    float: left;
}

2- 您应该指定子菜单的 left 位置属性，以便它们与父菜单项正确地左对齐。

#menu-rigging-menu > li ul {
    left: 0;
}

这应该会让您走上正确的轨道。

更新:)

要在子菜单上也保持悬停效果，请尝试将具有以下选择器 #menu-rigging-menu li:hover > ul 的 CSS 代码块更改为此:

#menu-rigging-menu li:hover > ul,
#menu-rigging-menu li > ul:hover {
    border-left: 0 none;
    display: inline-block;
}