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