如何在水平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");

This jquery puts each div horizontally but I want the .art a tags to be organised vertically so it ends up looking like this:

I have tried adding this:

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

But this makes the menu look like this:

Which is not what I want.

Please see the JSFiddle of my attempt

Edit:

I have also tried:

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

Which has ended up making it look like this:

Getting closer...

Edit 2:

Thank you @Paulie_D is there anyway to prevent this gap (that I highlighted red):

Answer 1

An odd arrangement, but you can do it if you set the menu items to float and adjust spacing:

#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;
}

See Fiddle.

Answer 2

You don't need JavaScript for such a simple task, just add some a second level menu, wrap around the children and attach a some styles like:

    #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

A standard ul & li structure would serve you better I'd suggest.

A basic example is as follows. Additional styling is, of course, required but the required layout effect is achieved.

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