Question

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

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

css下拉菜单 - “隐藏”嵌套菜单项

1 个答案: