0

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

这是我的 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 Sub1a Sub1b

变成：（电流输出）

项目 1 子 1a 子 1b 项目 2

4

1 回答 1

1

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

给你的#NAV > UL > LI

添加：vertical-align: top

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

于 2012-09-01T08:27:32.567 回答