使用CSS将子菜单置于主菜单的右侧

Question

I have a very basic menu on my site.

Here's my Demo: http://jsfiddle.net/a41xkr9z/

I'd like to position each sub menu to the right of the main menu so each sub menu is in line vertically with the top of the grey menu.

How do I achieve this with CSS?

 $('#menu-primary-menu>li>a').click(function() { $(this).next().toggle(); }); 

 #menu-primary-menu>li>ul { display: none } #menu-primary-menu { background-color:#eee; width:200px; } #menu-primary-menu ul { width: 200px; background-color: red; position: absolute; margin-top: 0; left: 250px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <div class="menu-primary-menu-container"> <ul id="menu-primary-menu" class="menu"> <li id="menu-item-27" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-27"><a href="#">Projects</a> <ul> <li id="menu-item-26" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-26"><a href="/category/projects/residential/">Residential</a> </li> <li id="menu-item-24" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-24"><a href="/category/projects/private/">Private</a> </li> </ul> </li> <li id="menu-item-27" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-27"><a href="#">More Projects</a> <ul> <li id="menu-item-26" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-26"><a href="/category/projects/residential/">Residential</a> </li> <li id="menu-item-24" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-24"><a href="/category/projects/private/">Private</a> </li> </ul> </li> </ul> </div> 

Answer 1

Modify your css like this. This will position sub-menu vertically with parent menu.

Fiddle Here

#menu-primary-menu{position:relative;}  /*--Added--*/
#menu-primary-menu ul {
    width: 200px;
    background-color: red;
    position: absolute;
    /*---margin-top: 0;---- Removed*/
    top:0;  /*--Added--*/
    left: 250px;
}

Answer 2

Just add top: 0 to your #menu-primary-menu element

 $('#menu-primary-menu>li>a').click(function() { $(this).next().toggle(); }); 

 #menu-primary-menu>li>ul { display: none } body{ margin: 0; padding: 0; } #menu-primary-menu { position: relative; background-color:#eee; width:200px; } #menu-primary-menu ul { width: 200px; background-color: red; position: absolute; left: 250px; top: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <div class="menu-primary-menu-container"> <ul id="menu-primary-menu" class="menu"> <li id="menu-item-27" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-27"><a href="#">Projects</a> <ul> <li id="menu-item-26" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-26"><a href="/category/projects/residential/">Residential</a> </li> <li id="menu-item-24" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-24"><a href="/category/projects/private/">Private</a> </li> </ul> </li> <li id="menu-item-27" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-27"><a href="#">More Projects</a> <ul> <li id="menu-item-26" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-26"><a href="/category/projects/residential/">Residential</a> </li> <li id="menu-item-24" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-24"><a href="/category/projects/private/">Private</a> </li> </ul> </li> </ul> </div>