Question

当我将鼠标悬停在每个选项上时，我正在使用一个菜单系统，该系统具有带弹出菜单的水平菜单栏。我希望看到的是，当您将鼠标悬停在菜单选项上时，没有包含顶级子选项。如果我为这个内容定义一个静态宽度它没有任何包装，但是对于内容较少的菜单而言，这看起来很糟糕，因为有不必要的空白区域。如果我添加一个白色空间nowrap内容不再包装但“容器”UL在内联块格式化时不会自动调整大小到其中包含的内容的正确大小（这是下面链接的迭代））。我想使用nowrap解决方案，其中每个LI菜单的父UL自动调整大小，以便我不强制执行具有多余空白的超大边界。

菜单如下：

        <div class="container">
        <ul id="nav">
            <li><a href="index.html">Home</a></li>
            <li><a href="#s1">generic</a>
                <span id="s1"></span>
                <ul class="subs">
                    <li><a href="generic.html">generic</a></li>
                    <li><a href="#">generic 1</a>
                        <ul>
                            <li><a href="generic.html">generic 1</a></li>
                            <li><a href="generic.html">generic 2</a></li>
                            <li><a href="generic.html">generic 3</a></li>
                            <li><a href="generic.html">generic 4</a></li>
                            <li><a href="generic.html">generic 5</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Week 2</a>
                        <ul>
                            <li><a href="w2d1.html">Day 1</a></li>
                            <li><a href="w2d2.html">Day 2</a></li>
                            <li><a href="w2d3.html">Day 3</a></li>
                            <li><a href="w2d4.html">Day 4</a></li>
                            <li><a href="w2d5.html">Day 5</a></li>
                        </ul>                           
                    </li>
                    <li><a href="w3.html">Week 3</a></li>
                    <li><a href="w4.html">Week 4</a></li>
                    <li><a href="continualedu.html">Continual Education</a></li>
                </ul>
            </li>
            <li><a href="#s2">generic</a>
                <span id="s2"></span>
                <ul class="subs">
                    <li><a href="#">generic</a>
                        <ul>
                            <li><a href="generic.html">generic</a></li>
                            <li><a href="generic.html">generic</a></li>
                            <li><a href="generic.html">generic</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Tech</a>
                        <ul>
                            <li><a href="generic">generic</a></li>
                            <li><a href="generic">generic</a></li>
                            <li><a href="generic">generic</a></li>
                            <li><a href="generic">generic</a></li>
                            <li><a href="generic">generic</a></li>
                            <li><a href="generic">generic</a></li>
                        </ul>
                    </li>
                    <li><a href="generic">generic</a>
                    </li>
                    <li><a href="genericl">generic</a>
                    </li>
                </ul>
            </li>
            <li><a href="#s3">generic</a>
                <span id="s3"></span>
                <ul class="subs">
                    <li><a href="tier1.html">generic</a></li>
                    <li><a href="tier2.html">generic</a></li>
                    <li><a href="tier3.html">generic</a></li>
                    <li><a href="prement.html">generic</a></li>
                    <li><a href="rcc.html">generic</a></li>
                </ul>
            </li>
            <li><a href="#">generic</a>
                <span id="s4"></span>
                <ul class="subs">
                    <li><a href="#">generic</a>
                        <ul>
                            <li><a href="generic">generic</a></li>
                            <li><a href="generic">generic</a></li>
                            <li><a href="generic">generic</a></li>
                        </ul>
                    </li>
                    <li><a href="generic.html">generic</a></li>
                    <li><a href="generic.html">generic</a></li>
                </ul>
            </li>
            <li><a href="#">generic</a></li>
            <li><a href="#">generic/generic/generic</a></li>
            <li><a href="#">generic</a>
                <span id="s5"></span>
                <ul class="subs">
                    <li><a href="generic.html">generic</a></li>
                </ul>
            </li>
        </ul>
    </div>

我通过JSFidle链接整个项目，因为它放在这里太多了，并且有链接的内容。在JSFiddle的运行版本中记下，当你将鼠标悬停在菜单上时，大多数子菜单中的黑色边框（最后一个版本中的框，只是一个基本的阴影）小于内容 - 这个正是我想要解决的问题。

JSFiddle Project

如果你能帮助我，我非常感激！

在这里找不到与我的情景完全匹配的答案，但试图考虑类似问题的答案 - 无济于事。

Answer 1

在 #nav ul.subs＆gt;中li 类，您使用％设置相对填充。

将此更改为 px 中的绝对值已修复问题 - 保存到您的小提琴中。

防止包装块格式UL弹出菜单项

1 个答案: