html - css 下拉菜单 - "hiding"嵌套菜单项

Question

我正在尝试创建一个下拉菜单，但是我很难“隐藏”嵌套的菜单项。链接和样式工作正常，只是我错过了一些下拉效果。想法？

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 -->

Answer 1

这是您要找的吗？ 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>