html - css下拉菜单定位

Question

有人可以看看我的下拉菜单，我遇到了一些子元素的问题。问题在于 .sublevel 类别。这是双重的，首先是我必须绝对定位它，这可能是一个问题，因为每次我需要它移动到不同的元素时我都必须更新它。

第二个显然是它显示不正确的事实，我不确定为什么。

这是 JSfiddle 链接：

http://jsfiddle.net/ynwtN/3/

过渡代码也不起作用：

#cssmenu .sublevel:hover > ul{
      padding: 18px 26px;
      left:170px;
      top: 200px;
      display: block;
      color: white;
      font-size: 13px;
      text-decoration: none;
      text-transform: uppercase;
      width: 150px;
      border-left: 4px solid transparent;
      -webkit-transition: all .35s ease-in-out;
      -moz-transition: all .35s ease-in-out;
      -ms-transition: all .35s ease-in-out;
      transition: all .35s ease-in-out;
      text-shadow: 0 -1px 0 #c28130;
      text-shadow: 0 -1px 0 rgba(151, 99, 33, .43);
}

Answer 1

我编辑了你的代码....

尝试这个....

  #cssmenu .sublevel:hover > ul{
    padding: 18px 26px;
    left:155px;
     top: 150px;
    display: block;
    color: white;
    font-size: 13px;
    text-decoration: none;
    text-transform: uppercase;
    width: 150px;
    border-left: 4px solid transparent;
    -webkit-transition: all .35s ease-in-out;
    -moz-transition: all .35s ease-in-out;
    -ms-transition: all .35s ease-in-out;
    transition: all .35s ease-in-out;
    text-shadow: 0 -1px 0 #c28130;
    text-shadow: 0 -1px 0 rgba(151, 99, 33, .43);

}