html - 在父元素下方居中展开菜单

Question

现场直播

jsfiddle

我的社交媒体图标有一个带有两个选项的推出菜单。我希望推出菜单在父（图标）下方居中而不使推出文本居中。

html

<div id="header">
    <div class="social">
            <ul>
                <li><a href="#"><img src="<?php bloginfo('template_url');?>/img/instagram.png" alt="instagram" /></a>
                    <ul>
                        <li><a href="http://instagram.com/#/">a</a></li>
                        <li><a href="http://instagram.com/#/">b</a></li>
                    </ul>
                </li>
                <li><a href="#"><img src="<?php bloginfo('template_url');?>/img/youtube.png" alt="youtube" /></a>
                    <ul>
                        <li><a href="http://www.youtube.com/user/#">a</a></li>
                        <li><a href="http://www.youtube.com/user/#">b</a></li>
                    </ul>
                </li>
                <li><a href="#"><img src="<?php bloginfo('template_url');?>/img/facebook.png" alt="facebook" /></a>
                    <ul>
                        <li><a href="http://www.facebook.com/#">a</a></li>
                        <li><a href="http://www.facebook.com/#">b</a></li>
                    </ul>
                </li>
                <li><a href="#"><img src="<?php bloginfo('template_url');?>/img/twitter.png" alt="twitter" /></a>
                    <ul>
                        <li><a href="https://twitter.com/#">a</a></li>
                        <li><a href="https://twitter.com/#">b</a></li>
                    </ul>
                </li>
                <li><a href="#"><img src="<?php bloginfo('template_url');?>/img/lockerz.png" alt="lockerz" /></a>
                    <ul>
                        <li><a href="http://lockerz.com/u/#">a</a></li>
                        <li><a href="http://lockerz.com/u/#">b</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- end social -->
</div>

css

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

#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;
    font-size: 75%;
    white-space: nowrap;
}

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

#header .social ul li:hover ul li {
    background: #c6e000;
    display: block;
    text-align: right;
}

Answer 1

你可以试试这个修改后的 CSS：

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

#header .social ul {
    position: relative;
}

/*modified*/
#header .social > ul > li {
/*    display: inline-block;    */
    float:left;
}

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

#header .social ul li a {
    display: inline;
    padding-left: 3px;/*modified*/
    padding-right: 3px;/*added*/
    font-size: 75%;
    white-space: nowrap;
}

/*modified*/
#header .social ul li:hover ul {
    display: block;
/*    position: absolute;*/
    margin: 0 auto;
}

#header .social ul li:hover ul li {
    background: #c6e000;
    display: block;
    text-align: right;
}