サブナビゲーションが水平に表示されない

Question

さらにサブリストを含むナビゲーションバーを作成しています。最初のサブリストは、私がそれを望む方法を正確に表示しますが、それ以下のものはそうしません。最初のサブナビゲーションバーの下に水平に表示されるのではなく、そのサブバーは垂直方向と右側に表示されます。

誰にも分かりませんが、私は何かが欠けていると信じていますが、私の人生はそれを見つけることができません。

私は好きなものを説明するために写真を追加しました。青色の部分に赤色が表示されます。

あなたの時間を感謝！

nav { 
 
    margin: 0 auto; 
 
    text-align: center; 
 
} 
 
nav ul ul { 
 
    display: none; 
 
} 
 
nav ul li:hover > ul { 
 
    display: block; 
 
} 
 
nav ul { 
 
    color: white; 
 
    background: #787878; 
 
    background: linear-gradient(top, #787878 0%, #272727 100%); 
 
    background: -moz-linear-gradient(top, #787878 0%, #272727 100%); 
 
    background: -webkit-linear-gradient(top, #787878 0%, #272727 100%); 
 
    box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15); 
 
    padding: 0 20px; 
 
    border-radius: 25px; 
 
    list-style: none; 
 
    position: relative; 
 
    display: inline-table; 
 
} 
 
nav ul:after { 
 
    content: ""; 
 
    clear: both; 
 
    display: block; 
 
} 
 
nav ul li { 
 
    float: left; 
 
} 
 
nav ul li:hover { 
 
    background: #A8A8A8; 
 
} 
 
nav ul li:hover a { 
 
    color: #fff; 
 
} 
 
nav ul li a { 
 
    display: block; 
 
    padding: 15px 50px; 
 
    color: white; 
 
    text-decoration: none; 
 
} 
 
nav ul ul { 
 
    background: #505050; 
 
    border-radius: 0px; 
 
    padding: 0; 
 
    position: absolute; 
 
    top: 100%; 
 
} 
 
nav ul ul li { 
 
    float: left; 
 
    border-top: 1px solid #6b727c; 
 
    border-bottom: 1px solid #575f6a; 
 
    position: relative; 
 
} 
 
nav ul ul li a { 
 
    padding: 8px 40px; 
 
    color: #fff; 
 
} 
 
nav ul ul li a:hover { 
 
    background: #A8A8A8; 
 
} 
 
nav ul ul ul { 
 
    position: absolute; 
 
    left: 100%; 
 
    top: 0; 
 
} 
 
nav ul ul.ul-right { 
 
    right: 0; 
 
}

<nav> 
 
    <ul> 
 
    <li><a href="/p/">Players</a> 
 
     <ul> 
 
     <li><a href="#">Wonderkids</a> 
 
     </li> 
 
     <li><a href="#">Cheap Players</a> 
 
     </li> 
 
     <li><a href="#">Player Comparisons</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="/c/">Clubs</a> 
 
     <ul> 
 
     <li><a href="#">Club Info</a> 
 
     </li> 
 
     <li><a href="#">Transfer Budgets</a> 
 
     </li> 
 
     <li><a href="#">Sugar Daddys</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="/s/">Downloads</a> 
 
     <ul> 
 
     <li><a href="#">Tactics</a> 
 
     </li> 
 
     <li><a href="#">Shortlists</a> 
 
      <ul> 
 
      <li><a href="#">Various Shortlists</a> 
 
      </li> 
 
      <li><a href="#">Positional Shortlists</a> 
 
      </li> 
 
      <li><a href="#">Staff Shortlists</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="/g/">Write-Ups</a> 
 
    </li> 
 
    <li><a href="/p/">Social</a> 
 
     <ul class="ul-right"> 
 
     <li><a href="#">Facebook</a> 
 
     </li> 
 
     <li><a href="#">Twitter</a> 
 
     </li> 
 
     <li><a href="#">Youtube</a> 
 
     </li> 
 
     <li><a href="#">Affiliates</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="/aboutus/">About Us</a> 
 
    </li> 
 
    </ul> 
 
</nav>

Answer 1

あなたは、ULの幅を設定する問題がない場合は、これが解決策になるかもしれません：

nav { 
 
    margin: 0 auto; 
 
    text-align: center; 
 
} 
 
nav ul ul { 
 
    display: none; 
 
} 
 
nav ul li:hover > ul { 
 
    display: block; 
 
} 
 
nav ul { 
 
    color: white; 
 
    background: #787878; 
 
    background: linear-gradient(top, #787878 0%, #272727 100%); 
 
    background: -moz-linear-gradient(top, #787878 0%, #272727 100%); 
 
    background: -webkit-linear-gradient(top, #787878 0%, #272727 100%); 
 
    box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15); 
 
    padding: 0 20px; 
 
    border-radius: 25px; 
 
    list-style: none; 
 
    position: relative; 
 
    display: inline-table; 
 
} 
 
nav ul:after { 
 
    content: ""; 
 
    clear: both; 
 
    display: block; 
 
} 
 
nav ul li { 
 
    float: left; 
 
} 
 
nav ul li:hover { 
 
    background: #A8A8A8; 
 
} 
 
nav ul li:hover a { 
 
    color: #fff; 
 
} 
 
nav ul li a { 
 
    display: block; 
 
    padding: 15px 50px; 
 
    color: white; 
 
    text-decoration: none; 
 
} 
 
nav ul ul { 
 
    background: #505050; 
 
    border-radius: 0px; 
 
    padding: 0; 
 
    position: absolute; 
 
    top: 100%; 
 
} 
 
nav ul ul li { 
 
    float: left; 
 
    border-top: 1px solid #6b727c; 
 
    border-bottom: 1px solid #575f6a; 
 
    position: relative; 
 
} 
 
nav ul ul li a { 
 
    padding: 8px 40px; 
 
    color: #fff; 
 
} 
 
nav ul ul li a:hover { 
 
    background: #A8A8A8; 
 
} 
 
nav ul ul ul { 
 
    position: absolute; 
 
top: 100%; 
 
width: 578px; 
 
} 
 
nav ul ul.ul-right { 
 
    right: 0; 
 
}

<nav> 
 
    <ul> 
 
    <li><a href="/p/">Players</a> 
 
     <ul> 
 
     <li><a href="#">Wonderkids</a> 
 
     </li> 
 
     <li><a href="#">Cheap Players</a> 
 
     </li> 
 
     <li><a href="#">Player Comparisons</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="/c/">Clubs</a> 
 
     <ul> 
 
     <li><a href="#">Club Info</a> 
 
     </li> 
 
     <li><a href="#">Transfer Budgets</a> 
 
     </li> 
 
     <li><a href="#">Sugar Daddys</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="/s/">Downloads</a> 
 
     <ul> 
 
     <li><a href="#">Tactics</a> 
 
     </li> 
 
     <li><a href="#">Shortlists</a> 
 
      <ul> 
 
      <li><a href="#">Various Shortlists</a> 
 
      </li> 
 
      <li><a href="#">Positional Shortlists</a> 
 
      </li> 
 
      <li><a href="#">Staff Shortlists</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="/g/">Write-Ups</a> 
 
    </li> 
 
    <li><a href="/p/">Social</a> 
 
     <ul class="ul-right"> 
 
     <li><a href="#">Facebook</a> 
 
     </li> 
 
     <li><a href="#">Twitter</a> 
 
     </li> 
 
     <li><a href="#">Youtube</a> 
 
     </li> 
 
     <li><a href="#">Affiliates</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="/aboutus/">About Us</a> 
 
    </li> 
 
    </ul> 
 
</nav>