html - 带有下拉菜单的水平菜单中断

Question

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

fiddle

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，所以当它显示时它仍然在页面流中并增加父 LI 的宽度。改为给它 position:absolute(并将其填充设置为 0)。

您的 CSS 应如下所示:

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

Demo