水平列表中的垂直子列表给出对齐问题答案

【问题标题】：Vertical Sub List in Horizontal List Giving Alignment Problems水平列表中的垂直子列表给出对齐问题
【发布时间】：2012-08-31 21:21:50
【问题描述】：

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

这是我的 CSS 代码：

#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 项目 2 子1a 子1b

变成：（电流输出）

项目 1 子1a Sub1b 项目2

【问题讨论】：

你能创建一个这样的jsfiddle吗？有点难以想象这一点:-)
感谢克里斯蒂安的提示。这是 jsFiddle：jsfiddle.net/rutagupta/PRGhj

标签： jquery html css drop-down-menu

【解决方案1】：

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

致您的#NAV > UL > LI

地址：vertical-align: top

您应该始终将 vertical-align: top 添加到 inline-block 元素，除非您希望获得相反的效果 :-)

【讨论】：