0
Ich erstelle eine Navigationsleiste mit weiteren Unterlisten. Die erste Unterliste zeigt genau das an, was ich will, aber die untere darunter. Statt horizontal unterhalb der ursprünglichen Navigationsleiste anzuzeigen, wird sie vertikal und rechts davon angezeigt.Sub Nav wird nicht horizontal darunter angezeigt
Hat jemand eine Idee, warum das ist, glaube ich, dass ich etwas vermisse, aber für das Leben von mir kann es nicht finden.
Ich habe ein Foto hinzugefügt, um zu erklären, was ich möchte. Das Rot sollte erscheinen, wo das Blau ist.
Schätzen Sie Ihre Zeit!
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>
Ich kann Ihnen nicht sagen, wie man fixiere es jetzt (kurze Zeit), aber dein Problem ist, dass dein ternäres Menü die Breite seines Elternteils erbt, in diesem Fall y unser li. Wenn Sie eine statische Breite für Ihre ul ul ul festlegen, sehen Sie, dass sie ordnungsgemäß funktioniert – Trey