如何在水平div中添加垂直div

Question

HTML：

<div align="center" id="menu_bar">
    <div class="menu_item"><a href="index">Home</a></div>
    <div class="menu_item art">
         <a href="art">Art</a>
         <a class="photography" href="photography">Photography</a>
         <a class="drawing" href="drawing">Drawing</a>
         <a class="painting" href="painting">Painting</a>
    </div>
    <div class="menu_item"><a href="film">Film</a></div>
    <div class="menu_item"><a href="blog">Blog</a></div>
    <div class="menu_item"><a href="about">About</a></div>
    <div class="menu_item"><a href="contact">Contact</a></div>
</div>

的jQuery / CSS：

$('#menu_bar div').css("display","inline");

这个jquery将每个div水平放置，但我希望.art个标签垂直组织，所以最终看起来像这样：

我尝试添加此内容：

$('.art').css("display","block");

但是这使得菜单看起来像这样：

这不是我想要的。

请参阅我的JSFiddle尝试

编辑：

我也尝试过：

$('.art a').css("display","block");

最终使它看起来像这样：

越来越近了......

编辑2：

谢谢@Paulie_D无论如何要防止这种差距（我突出显示为红色）：

Answer 1

奇怪的排列，但如果您将菜单项设置为浮动并调整间距，则可以执行此操作：

#menu_bar div {
    float: left;
    margin-right: 1em;
}

.art a {
    display: block;
}

#menu_bar div:first-child {
    margin-right: -1.5em;
}

#menu_bar div:nth-of-type(3) {
    margin-left: -2.5em;
}

请参阅Fiddle.

Answer 2

这样一个简单的任务你不需要JavaScript，只需添加一些二级菜单，环绕子项并附加一些样式，如：

    #menu_bar > .menu_item {
    display: inline-block;
    position:relative;
}
#menu_bar .submenu{
    position: absolute;
    left: 0;
    top: 100%;
}

http://jsfiddle.net/vaop347b/1/

Answer 3

标准ul＆amp; li结构会更好地为您提供帮助。

一个基本的例子如下。当然，还需要额外的样式，但是可以实现所需的布局效果。

.navbar {} ul,
li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.main-menu > li {
  display: inline-block;
  vertical-align: top;
  text-align: center;
  position:relative
}

.sub-menu {
 position:absolute;
 top:100%;
 left:50%;
 transform:translateX(-50%);
 }

.sub-menu > li {
  text-align: center;
  white-space:nowrap;
  width:auto;
}

<div class="navbar">
  <ul class="main-menu">
    <li><a href="#">Item 1</a>

    </li>
    <li><a href="#">Item 2</a>

      <ul class="sub-menu">
        <li><a href="#">Sub Item 1</a>

        </li>
        <li><a href="#">Sub Item 2</a>

        </li>
        <li><a href="#">Lorem ipsum dolor.</a>

        </li>
        <li><a href="#">Item 4</a>

        </li>
        <li><a href="#">Item 5</a>

        </li>
      </ul>
    </li>
    <li><a href="#">Item 3</a>

    </li>
    <li><a href="#">Item 4</a>

    </li>
    <li><a href="#">Item 5</a>

    </li>
  </ul>
</div>