css 菜单悬停显示子菜单不对齐

Question

我遇到了一个问题，即左侧导航菜单在悬停时有子菜单并且未对齐。

DIV#nav-cat UL UL.level2 {
z-index: 8007;
position: absolute;
border-bottom-color: #b0ccdc;
border-right-width:1px;
background-color: #e8f1f6;
border-top-color: #b0ccdc;
width:132px;
display: none;
border-top-width:1px;
border-bottom-width:1px;
border-right-color: #b0ccdc;
border-left-color: #b0ccdc;
border-left-width:1px;
top: -2px;
left: 178px;
}

第一个菜单“电子”在旁边正确显示子菜单。另一个菜单“Apple accessories”例如显示子菜单(手机壳)未对齐。它显示在顶部而不是菜单的旁边。

CSS类是

<ul class='level1'> and <ul class='level2'>. 

我找不到问题所在。请指导我更正 css。

Answer 1

DEMO

HTML

<ul>
  <li class="submenu">
    <ul class="level2"></ul>
  </li>
</ul>

CSS

.submenu{
    position:relative;
    height:15px
}
.submenu:hover > .level2{  /*target this li level2*/
    position:absolute;
    left:183px; /*width of submenu*/
    top:0;
}