防止块格式 UL 弹出菜单项的换行

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 > li 类中，您正在相对于 % 设置侧边距。

将其更改为 px 中的绝对值已解决问题 - 保存到您的小提琴中。