0

我试图弄清楚为什么我的下拉菜单的第三级没有延伸到其中包含的文本的宽度。到目前为止，文本只是自动缩进到下一行，但所有其他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;
            }
        }
    }
}
4

3 回答 3

1

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

header nav ul ul li a { white-space: nowrap; }
于 2013-07-30T03:39:50.627 回答
0

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

于 2013-07-30T03:38:01.610 回答
0

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

header nav ul ul li {
float: none;
position: relative;
white-space: nowrap;
}
于 2013-07-30T03:45:29.860 回答