使用CSS将子菜单定位到主菜单的右侧

Question

我的网站上有一个非常基本的菜单。

这是我的演示： http://jsfiddle.net/a41xkr9z/

我想将每个子菜单放在主菜单的右侧，这样每个子菜单都与灰色菜单的顶部垂直排列。

如何使用CSS实现这一目标？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

像这样修改你的CSS。这将使用父菜单垂直定位子菜单。

<强> the DOM spec

dplyr

Answer 2

只需将top: 0添加到您的#menu-primary-menu元素

即可

$('#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>