Question

我有一个水平的社交媒体菜单，当盘旋时有两个选项。菜单在悬停状态之外完全对齐，但是当项目悬停时，水平对齐会中断。我想知道如何才能使下拉项目显示在父项下面而不会破坏水平对齐？

的HTML / PHP -

<div class="social">
        <ul>
            <li><a href="#"><img src="<?php bloginfo('template_url');?>/img/instagram.png" alt="instagram" /></a>
                <ul>
                    <li><a href="#">cait</a></li>
                    <li><a href="#">shannon</a></li>
                </ul>
            </li>
            <li><a href="#"><img src="<?php bloginfo('template_url');?>/img/youtube.png" alt="youtube" /></a>
                <ul>
                    <li><a href="#">cait</a></li>
                    <li><a href="#">shannon</a></li>
                </ul>
            </li>
            <li><a href="#"><img src="<?php bloginfo('template_url');?>/img/facebook.png" alt="facebook" /></a>
                <ul>
                    <li><a href="#">cait</a></li>
                    <li><a href="#">shannon</a></li>
                </ul>
            </li>
            <li><a href="#"><img src="<?php bloginfo('template_url');?>/img/twitter.png" alt="twitter" /></a>
                <ul>
                    <li><a href="#">cait</a></li>
                    <li><a href="#">shannon</a></li>
                </ul>
            </li>
            <li><a href="#"><img src="<?php bloginfo('template_url');?>/img/pinterest.png" alt="lockerz" /></a>
                <ul>
                    <li><a href="#">cait</a></li>
                    <li><a href="#">shannon</a></li>
                </ul>
            </li>
        </ul>
    </div><!-- end social -->

css-

#header .social {
    float: right;
    list-style: none;
    padding-top: 20px;
}

#header .social ul li {
    display: inline;
    position: relative;
}

#header .social ul li:hover {
    display: block;
    position: relative;
}

#header .social ul li ul {
    display: none;
}

#header .social ul li a {
    display: inline;
    padding-left: 6px;
    white-space: nowrap;
}

#header .social ul li:hover ul {
    display: block;
    position: relative;
}

#header .social ul li:hover li {
    float: none;
}

Answer 1

需要修改两件事：

（1）你最初给你的LI display:inline，然后在悬停时给display: block，这就是为什么你的水平对齐正在打破。摆脱LI的悬停状态并将其显示设置为inline-block。

（2）您为嵌入式UL position:relative提供了嵌入式UL position:absolute，因此当它显示时它仍在页面的流中并增加了父LI的宽度。改为给它#header .social { float: right; list-style: none; padding-top: 20px; } #header .social ul { position: relative; } #header .social ul li { display: inline-block; } #header .social ul li ul { display: none; padding: 0; } #header .social ul li a { display: inline; padding-left: 6px; white-space: nowrap; } #header .social ul li:hover ul { display: block; position: absolute; }（并将其填充设置为0）。

您的CSS应如下所示：

{{1}}

Demo

水平菜单打破下拉菜单

1 个答案: