1

ホバーすると 2 つのオプションがある横型のソーシャル メディア メニューがあります。メニューは、ホバー状態以外では完全に配置されていますが、アイテムがホバーされると、水平方向の配置が崩れます。水平方向の配置を壊さずに、ドロップダウン項目が親項目の下に表示されるようにするにはどうすればよいでしょうか?

フィドル

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

1 に答える 1

1

次の 2 つの点を修正する必要があります。

(1) LIdisplay: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;
}

デモ

于 2013-05-29T17:57:41.683 に答える