0
我有一個響應下拉菜單，當寬度爲100％時，將以其最小尺寸爲中心，但當寬度變爲100％時，將不會。我有它的父母和父母的父母的設置爲100％的最大寬度，但最大寬度屬性似乎沒有像它應該的那樣工作。爲什麼我的下拉菜單不是以最大寬度居中？
從我的理解，最大寬度是相對於父項，所以如果其父項和其父項的父項設置爲最大寬度爲100％，則設置爲最大寬度寬度的最小子項應具有相同寬度作爲最高父母，這是最大寬度100％。
我的代碼有什麼問題，或者我理解錯了什麼？我知道我可以解決的100％的寬度問題，但我想知道爲什麼最大寬度心不是workng
nav {
color: white;
background-color: orange;
margin: auto;
padding: 0;
max-width: 100%;
}
nav li > span, nav a {
font-size: 1.3em;
}
nav ul {
padding: 0;
text-align: center;
max-width: 100%;
margin: auto;
}
nav li {
border-style: solid;
border-width: 0 1px 0 0;
border-color: rgba(0,0,0,.1);
list-style: none;
max-width: 100%;
}
.main-nav {
position: relative;
}
.sub-nav {
box-shadow: 5px 5px 10px rgba(0,0,0,.1);
z-index: 1;
position: absolute;
display: none;
background-color: white;
max-width: 100%;
}
.sub-nav li {
max-width: 100%;
}
.sub-nav li a {
max-width: 100%;
}
.main-nav:hover .sub-nav {
display: block;
}
@media screen and (min-width: 450px){
nav li {
display: inline-block;
margin: 3px;
padding: 2px;
}
nav ul {
text-align: right;
padding: 0 5% 0 0;
}
.main-title {
text-align: left;
margin: 0 0 15px 15%;
padding: 15px 0 0 0;
color: orange;
font-size: 4em;
}
}<header>
<h1 class="main-title">This Is a Test</h1>
<nav>
<ul>
<li class="main-nav home-page active">
<a href="index.html">HOME</a></li>
<li class="main-nav">
<span> Content 1 </span>
<ul class="sub-nav">
<li><a href="page1.html">Page 1</a></li>
<li><a href="page2.html">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
</ul>
</li>
<li class="main-nav">
<span> Content 2 </span>
<ul class="sub-nav">
<li><a href="page4.html">Page 4</a></li>
<li><a href="page5.html">Page 5</a></li>
<li><a href="page6.html">Page 6</a></li>
</ul>
</li>
<li class="main-nav">
<span> Content 3 </span>
<ul class="sub-nav">
<li><a href="page7.html">Page 7</a></li>
<li><a href="page1.html">Page 8</a></li>
<li><a href="page1.html">Page 9</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<section>
</section>
<footer>
</footer>