下拉菜单的第 3 级未拉伸到文本宽度答案

【问题标题】：Level 3 of drop down menu not stretching to width of text下拉菜单的第 3 级未拉伸到文本宽度
【发布时间】：2013-07-30 11:45:29
【问题描述】：

我试图弄清楚为什么我的下拉菜单的第三级没有延伸到其中包含的文本的宽度。到目前为止，文本只是自动缩进到下一行，但所有其他 li 都没有这样做，而是在一行上。有人可以帮我找出为什么会这样吗？谢谢！

这是我到目前为止所做的示例：http://themedwebdesign.com/salmon/

这里是html

   <header>
        <div class="container clearfix">
            <div id="logo"><img src="./img/salmon-logo.png" alt=""></div>
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Pages</a>
                        <ul>
                            <li><a href="#">About</a></li>
                            <li><a href="#">Services</a></li>
                            <li><a href="#">Meet the Team</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Features</a>
                        <ul>
                            <li><a href="#">Feature</a></li>
                            <li><a href="#">Level 3</a>
                                <ul>
                                    <li><a href="#">Level 3</a></li>
                                    <li><a href="#">Level 3</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#">Portfolio</a>
                    <li><a href="#">Blog</a>
                        <ul>
                            <li><a href="#">Single</a></li>
                            <li><a href="#">Large</a></li>
                            <li><a href="#">Medium</a></li>
                            <li><a href="#">Small</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

这是css，我很抱歉它是用sass制作的。如果需要编译好的css文件，我会贴出来的。

nav {
    float: right;

    ul {
        list-style: none;
        position: relative;
        display: inline-block;
        margin: 0;

        li {
            float: left;
            text-transform: uppercase;
            font-weight: 300;

            a {
                text-decoration: none;
                color: inherit;
                padding: 15px 25px;
                display: block;
            }

            &:hover {
                color: $colorSite;
            }

            &:hover > ul {
                display: block;
            }
        }

        &:after {
            content: "";
            clear: both;
            display: block;
        }

        ul {
            position: absolute;
            top: 100%;
            display: none;
            padding: 0;
            margin: 0;
            border: 1px solid $colorSite;

            li {
                float: none;
                position: relative;

                a {
                    color: $colorDark;
                    text-decoration: none;
                    display: block;
                    padding: 15px 25px;
                    background-color: #fff;

                    &:hover {
                        color: #fff;
                        background-color: $colorSite;
                    }
                }
            }

            ul {
                position: absolute;
                left: 100%;
                top: 0;
            }
        }
    }
}

【问题讨论】：

标签： html css sass

【解决方案1】：

如果你想拉伸而不想要第二行，你可以在你的 css 中简单地做到这一点

header nav ul ul li a { white-space: nowrap; }

【讨论】：

【解决方案2】：

只需在 css 头 nav ul ul ul 下制作 width: 100%;

【讨论】：

一旦我在添加一定数量后添加了更多文本，文本再次缩进。

【解决方案3】：

white-space: nowrap; 将阻止文本换行。

header nav ul ul li {
float: none;
position: relative;
white-space: nowrap;
}

【讨论】：

它确实会阻止文本换行，但随后文本会扩展到 li
@zachstarnes 你是对的。但这不会影响您的情况。我也在你的网站上试过。
一旦我从header nav ul ul ul 中删除了width: 100%，它就起作用了
将它放在a 或li 上会更好
就像我在回答中建议的那样，我会将它放在“a”标签中。在这个场景中，我会将“li”视为 div 容器，将“a”标签视为文本，并且我希望文本没有换行。但无论哪种方式都可以。这真的是个人选择。