如何在水平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 a標簽，因此最終看起來像這樣：

我嘗試添加以下內容：

$('.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;
}

參見小提琴。

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 ＆ 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>