Question

以下是基于CSS的下拉菜单的一个非常简单的示例：http://jsfiddle.net/V8aL6/

    <ul id="nav">
    <li>
        <a href="#" title="Return home">Home</a>

    </li>
    <li>
        <a href="#" title="About the company">About</a>
        <ul>
            <li><a href="#">The product</a></li>
            <li><a href="#">Meet the team</a></li>
        </ul>

    </li>
    <li>
        <a href="#" title="The services we offer">Services</a>
        <ul>
            <li><a href="#">Sevice one</a></li>
            <li><a href="#">Sevice two</a></li>
            <li><a href="#">Sevice three</a></li>

            <li><a href="#">Sevice four</a></li>
        </ul>
    </li>
    <li>
        <a href="#" title="Our product range">Product</a>
        <ul>
            <li><a href="#">Small product (one)</a></li>

            <li><a href="#">Small product (two)</a></li>
            <li><a href="#">Small product (three)</a></li>
            <li><a href="#">Small product (four)</a></li>
            <li><a href="#">Big product (five)</a></li>
            <li><a href="#">Big product (six)</a></li>
            <li><a href="#">Big product (seven)</a></li>

            <li><a href="#">Big product (eight)</a></li>
            <li><a href="#">Enourmous product (nine)</a></li>
            <li><a href="#">Enourmous product (ten)</a></li>
            <li><a href="#">Enourmous product (eleven)</a></li>
        </ul>
    </li>
    <li>

        <a href="#" title="Get in touch with us">Contact</a>
        <ul>
            <li><a href="#">Out-of-hours</a></li>
            <li><a href="#">Directions</a></li>
        </ul>
    </li>
</ul>

但是我无法找到一个解决方案来将子菜单与其父级的右边缘对齐，如下所示：

simple drop-down menu aligned left

Answer 1

此菜单通过修改left属性来实现隐藏/显示。您所需要的只是调整CSS规则，它控制子菜单的显示机制：

#nav li:hover ul{
    left:0;
}

而不是将其对齐到左侧，我们希望将其对齐，因此我们添加right:0;。但是，如果我们不触及左侧声明，菜单将被切断，因此我们写left:0;而不是left:auto;，让菜单扩展到它的固有宽度。为了适应父li的保证金，我们添加与负保证金相同的金额，我们完成了：

#nav li:hover ul{
    left:auto;
    right:0;
    margin-right:-10px;
}

you modified fiddle

Answer 2

如果你将列表放在右边，它会更好更干净，而不是将UL移出屏幕，你只需将显示属性从无切换到阻塞。

您需要对这些规则进行一些更改并添加这些属性：

#nav li:hover ul {
    display: block;
    right: 0;
}

#nav ul {
    display: none;
}
#nav ul li {
    margin-right: 0;
}

请参阅我的更新小提琴：http://jsfiddle.net/V8aL6/2/

Answer 3

更好的解决方案应该是：

#nav ul li ul, #nav ul li:hover ul {
    float:right;
    margin-right:2px; /*optional*/
}

Answer 4

将Bootstrap类.pull-right添加到<div class='btn-group'。应该如下所示： <div class='btn-group pull-right'

Answer 5

要自动右下方对齐下拉列表：

     $wp_args = array(
     's'                => 'health',
     'posts_per_page'   => 10,
     );


     $wp_query = new WP_Query( $wp_args ); relevanssi_do_query( $wp_query );
     if( $wp_query->have_posts() ): while( $wp_query->have_posts() ) : $wp_query->the_post();

带有子菜单的CSS下拉菜单，与子菜单的右边缘对齐

5 个答案: