html - 我的导航栏中的 <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

添加显示 block

#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