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

【问题标题】：css drop down menu - "hiding" nested menu itemscss 下拉菜单 - “隐藏”嵌套菜单项
【发布时间】：2013-05-30 01:31:57
【问题描述】：

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

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

【问题讨论】：

使下拉的内容向左移动 -9999px，在父元素悬停时，将其向右移动 9999px。
@user2406160 什么？只需找到您想要隐藏的内容并发送display:none。你几乎没有什么可以离开这里的。请给我们看一个小提琴或图像或其他东西
@ntgCleaner 小提琴添加
ul 是 ul 的 invalid 子代。
根据 HTML5 规则，li 是 ul 或 ol 的唯一有效子级。如果你想嵌套uls 然后在li 中添加嵌套的ul。可能是这样的……jsfiddle.net/cScrD/1 看看 HTML 部分

标签： html css drop-down-menu

【解决方案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>

【讨论】：