0

ドロップダウン メニューを作成しようとしていますが、ネストされたメニュー項目を「非表示」にできません。リンクとスタイリングは問題なく機能します。何かを見逃しているのはドロップダウン効果だけです。アイデア？

jsfiddle

css-

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

#header .social ul li {
    display: inline;
    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: inline;
    position: absolute;
}

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

html/php-

<div class="social">
            <ul>
                <li><a href="#"><img src="<?php bloginfo('template_url');?>/img/instagram.png" alt="cait and shannon barker instagram" /></a></li>
                    <ul>
                        <li><a href="http://instagram.com/caitbarkerr/">cait</a></li>
                        <li><a href="http://instagram.com/shannonbarkerr/">shannon</a></li>
                    </ul>
                <li><a href="#"><img src="<?php bloginfo('template_url');?>/img/youtube.png" alt="cait and shannon barker youtube" /></a></li>
                    <ul>
                        <li><a href="http://www.youtube.com/user/caitbarker">cait</a></li>
                        <li><a href="http://www.youtube.com/user/shannonbarker">shannon</a></li>
                    </ul>
                <li><a href="#"><img src="<?php bloginfo('template_url');?>/img/facebook.png" alt="cait and shannon barker facebook" /></a></li>
                    <ul>
                        <li><a href="http://www.facebook.com/CaitShannonBarker">cait</a></li>
                        <li><a href="http://www.facebook.com/CaitShannonBarker">shannon</a></li>
                    </ul>
                <li><a href="#"><img src="<?php bloginfo('template_url');?>/img/twitter.png" alt="cait and shannon barker twitter" /></a></li>
                    <ul>
                        <li><a href="https://twitter.com/caitbarkerr">cait</a></li>
                        <li><a href="https://twitter.com/shannonbarkerr">shannon</a></li>
                    </ul>
                <li><a href="#"><img src="<?php bloginfo('template_url');?>/img/pinterest.png" alt="cait and shannon barker lockerz" /></a></li>
                    <ul>
                        <li><a href="http://lockerz.com/u/caitbarker">cait</a></li>
                        <li><a href="http://lockerz.com/u/shannonbarker">shannon</a></li>
                    </ul>
            </ul>
        </div><!-- end social -->
4

1 に答える 1

2

これはあなたが探しているものですか？http://jsfiddle.net/cScrD/3/

HTML 構造は標準ulではありませんでした (別の の子として配置するのが理想的ではありませんul。むしろ、liタグを開いてul内に配置しますli)。このような構造が理想です。

<div id="header">
<div class="social">
    <ul>
        <li><a href="#"><img src="<?php bloginfo('template_url');?>/img/instagram.png" alt="cait and shannon barker instagram" /></a><!-- li should not end here -->
            <ul>
                <li><a href="http://instagram.com/caitbarkerr/">cait</a></li>
                <li><a href="http://instagram.com/shannonbarkerr/">shannon</a></li>
            </ul>
        </li><!-- li should end here -->
    </ul>
</div>
</div>
于 2013-05-29T17:31:57.647 に答える