我的导航中的 <ul> 延伸到页面的一侧

Question

我的导航中有一个嵌套的<ul>。当<ul> 只有一个元素时，它的填充很好，<li> 非常适合。但是，当我在嵌套的<ul> 中有多个元素时，它会延伸到页面的一侧。我看不到与 :first-child 中的填充更改或嵌套 <ul> 的 css 中的任何内容有关。

具有多个元素的嵌套 ul

只有一个元素的嵌套 ul

这是 HTML：

<header id="header" class="alt">
            <h1><strong><a href="index.html">South Somerset Motocross Club</a></strong></h1>
            <nav id="nav">
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a>Info</a>
          <ul>
                            <li><a href="pages/info/clubrules.html">Club Rules</a></li>
                            <li><a href="pages/info/preracecheck.html">Pre-Race Bike Check</a></li>
                            <li><a href="pages/info/jobdescriptions.html">Job Descriptions</a></li>
                            <li><a href="pages/info/racefees.html">Race Fees</a></li>
                            <li><a href="pages/info/groupsandages.html">Groups And Ages</a></li>
          </ul>
        </li>
                    <li><a>About Us</a>
                        <ul>
                            <li><a href="pages/aboutus/ourheritage.html">Our Heritage</a></li>
                            <li><a href="pages/aboutus/committee.html">Committee</a></li>
                        </ul>
                    </li>
                    <li><a>News</a></li>
                    <li><a href="pages/fixtures.html">Fixtures</a></li>
                </ul>
            </nav>
        </header>

这是 CSS：

    #header nav {
        height: inherit;
        line-height: inherit;
        position: absolute;
        right: 1.25em;
        top: 0;
        vertical-align: middle;
    }

        #header nav ul {
            list-style: none;
            margin: 0;
            padding-left: 0;
        }

            #header nav ul li {
                color: #fff;
                display: inline-block;
                padding-left: 10px;
                padding-right: 10px;
                margin-left: 1em;
            }


            #header nav ul li ul {
                display: none;
                padding: 0;
                margin: 0;
                background-color: #eee;
                border-radius: 4px;
            }

            #header nav ul li:hover ul {
                display: block;
                position: absolute;
            }

            #header nav ul li ul li {
                border-radius: 4px;
                margin: 0 0 0 0;
                padding-left: 4px;
                padding-top: 1px;
                padding-right: 4px;
                width: 100%;
                color: black;
                font-size: 12pt;
            }

        #header nav ul li ul li a {
            color: #111;
            padding: 0;
            margin: 0;
            display: block;
        }

        #header nav ul li ul li a:hover {
            color: rgba(255, 255, 0, 1);
        }

        #header.alt nav ul li ul li a:hover {
            color: rgba(255, 255, 0, 1);
        }

        #header.alt nav ul li ul li:hover {
            background-color: #3477ff;
        }

        #header nav ul li ul li:hover {
            background-color: #3477ff;
        }

        #header.alt nav ul li ul li a {
            color: #000;
            padding: 0;
            display: block;
        }


                #header nav ul li a {
                    -moz-transition: color 0.1s ease-in-out;
                    -webkit-transition: color 0.1s ease-in-out;
                    -ms-transition: color 0.1s ease-in-out;
                    transition: color 0.1s ease-in-out;
                    color: #000;
                    display: inline-block;
                    text-decoration: none;
                }

                    #header nav ul li a:hover {
                        color: #000;
                    }

关于如何将<ul> 的宽度保持为其中一项的最大长度的任何想法？

Answer 1

添加显示块

#header nav ul li ul li {
            border-radius: 4px;
            margin: 0 0 0 0;
            padding-left: 4px;
            padding-top: 1px;
            padding-right: 4px;
            width: 100%;
            color: black;
            font-size: 12pt;
            display:block;
        }

这里是fiddle

Answer 2

哟！

我检查了你的 css，问题就在这里：

#header nav ul li ul li {
                border-radius: 4px;
                margin: 0 0 0 0;
                padding-left: 4px;
                padding-top: 1px;
                padding-right: 4px;
                width: 100%;
                color: black;
                font-size: 12pt;
            }

我改成这个了：

#header nav ul li ul li {
                border-radius: 4px;
                margin: 0 0 0 0;
                padding-left: 4px;
                padding-top: 1px;
                padding-right: 4px;
                //width: 100%;
                display:table;
                color: black;
                font-size: 12pt;
            }

所以现在它得到了最长项目的宽度:)

希望我能帮上忙！