jquery - 水平列表中的垂直子列表给出对齐问题

Question

我在创建带有图像的下拉菜单时遇到了问题。我正在尝试使用主菜单项和相应的垂直菜单实现居中对齐的水平列表。

这是我的 CSS Code 代码:

#nav {
    position: relative;
    top: 88px;
    padding: 0px;
    border: 0px;
    min-width: 800px;
    z-index: 999;
    font-size: 0px;
}

#nav > ul {
    padding: 0;
}

#nav > ul > li {
    display: inline-block;
    padding: 0 0 0 0;
}

#nav >ul> li> ul {
    width: 100%;
    display: none;
    padding: 0px;
    margin: 0px;
    list-style: none;
}

#nav> ul >li >ul> li {
    display: block;
    padding: 0px;
}

JQuery 代码:

$("#nav img").mouseover(function () {
  //$('ul .subList').hide();            
  var imgSrc = $(this).attr("src");
  var tempSrc = imgSrc.split(".png");
  var newSrc = tempSrc[0] + "Hover.png";
  $(this).attr("src", newSrc);
  $(this).closest('li').children('ul .subList').slideToggle();
});

其中 nav 是包含列表的 div。所有列表项都是图像。

我希望主菜单项对齐，子菜单项显示在相应菜单的下方，但主菜单项向上。

例如:

应该是:(期望的)

元素 1 元素 2Sub1a子1b

变成:(当前输出)

元素 1Sub1aSub1b Item2

Answer 1

啊哈，实际上解决这个问题出奇的简单。这是 CSS 发生的这些奇怪的默认事情之一。

到你的#NAV > UL > LI

添加:vertical-align: top

你应该总是添加 vertical-align: top 到 inline-block 元素，除非你想要相反的效果:-)