Html 增加nav和li

我对导航有问题。当我盘旋时，这一切都在增加，但我不知道为什么。但之前我在ol>li中清除线宽度：150px；一切都好，但我需要内容和左右，我不知道为什么要这样做。当你有更多的时间写作时

<!--

<nav>

            <ol>

                <li><a href="#">Example</a>

                    <ul>

                        <li><a href="#">Example</a></li>
                         <li><a href="#">Example</a></li>

                    </ul>
                </li>

                <li><a href="#">Example</a>

                    <ul>

                        <li><a href="#">Example</a></li>
                        <li><a href="#">Example</a></li>
                        <li><a href="#">Example</a></li>
                        <li><a href="#">Example</a></li>

                    </ul>

                </li>

                <li><a href="#">Example</a>

                    <ul>

                        <li><a href="#">Example</a></li>
                        <li><a href="#">Example</a></li>
                        <li><a href="#">Example</a></li>

                    </ul>

                </li>

                <li><a href="#">Example</a>

                    <ul>

                        <li><a href="#">Example</a></li>
                        <li><a href="#">Example</a></li>
                        <li><a href="#">Example</a></li>
                        <li><a href="#">Example</a></li>

                    </ul>

                </li>

                <li><a href="#">Example</a></li>

                <li><a href="#">Example</a></li>


                    <li><a href="#">Example</a>

                    <ul>

                        <li><a href="#">Example</a></li>
                        <li><a href="#">Example</a></li>
                        <li><a href="#">Example</a></li>
                        <li><a href="#">Example</a></li>

                    </ul> 

                </li>

            </ol>

    </nav>

-->

---

我想你把填充搞混了，你加了很多次 如果从列表SUL和列表元素SLI中删除填充 只需在链接元素中添加填充，问题就解决了

ol a {
color: #000;
text-decoration: none;
display: block;
padding: 0 30px; /* add this */
}

ol > li {
float: left;
/* padding: 0 30px;  REMOVE*/
margin: 0;
border-right: 1px solid #FFDF00;}

ol > li > ul {
list-style-type: none;
padding: 0;
margin: 0;
display: none;
font-size: 15px;
text-align: justify;
/* padding: 0 30px; REMOVE*/
}

ol > li > ul > li{
background-color: #fdd031;
/* padding: 0 8px; REMOVE*/
z-index: 1000;
border-top: 1px dashed #FFDF00;
}

工作演示：

ol a {
color: #000;
text-decoration: none;
display: block;
padding: 0 30px; /* add this */
}

ol > li {
float: left;
/* padding: 0 30px;  REMOVE*/
margin: 0;
border-right: 1px solid #FFDF00;}

ol > li > ul {
list-style-type: none;
padding: 0;
margin: 0;
display: none;
font-size: 15px;
text-align: justify;
/* padding: 0 30px; REMOVE*/
}

ol > li > ul > li{
background-color: #fdd031;
/* padding: 0 8px; REMOVE*/
z-index: 1000;
border-top: 1px dashed #FFDF00;
}