Ich versuche meine Hand bei HTML5/CSS3 als Lernprozess, aber ich habe Mühe, eine Navigationsleiste für Links zu anderen Abschnitten auf meinen Seiten zu erstellen. Ich habe den Code aus einem Tutorial gefunden und es funktioniert aber nur bei einer Auflösung von 1080p, wenn die Breite kleiner ist, wird der Balken auf andere Zeilen umgebrochen.nav bar wrapping auf kleineren Auflösungen
Wie stelle ich sicher, dass die Navigationsleiste nur eine Zeile aufnimmt (verkleinert, um zu passen), egal welche Auflösung der Benutzer verwendet?
Hier ist mein CSS-Code für die Navigationsleiste. Bitte beachten Sie, dass ich unter nav die Breite auf 33,3% eingestellt habe und auf die gleiche Weise gepolstert habe, um die Schaltflächen zu zentrieren. Ich weiß nicht, ob das der Grund ist.
nav {
display:block;
position: absolute;
left:0;
white-space:nowrap;
margin: 0 auto;
width: 33.3%;
background-color:#ff6600;
padding-left: 33.3%;
padding-right: 33.3%;
}
nav ul {
margin: 0 auto;
width: 100%;
list-style: none;
display: inline;
white-space:nowrap;
}
nav ul li {
float: left;
position: relative;
white-space:nowrap;
}
nav ul li a {
display: block;
margin: 0 auto;
width: 150px;
font-size: 16px;
font-family: century gothic;
line-height: 44px;
text-align: center;
text-decoration: none;
color:#575757;
white-space:nowrap;
}
nav ul ul {
width: 200px;
position:absolute;
top:-99999px;
left:0;
opacity: 0;
-webkit-transition: opacity .4s ease-in-out;
-moz-transition: opacity .4s ease-in-out;
-o-transition: opacity .4s ease-in-out;
transition: opacity .4s ease-in-out;
z-index:497;
background:#333;
padding: 2px;
border:1px solid #444;
border-top:none;
box-shadow:#111 0 3px 4px;
}
nav ul ul li a {
display: block;
width: 200px;
text-align: left;
padding-left: 3px;
font-size: 14px;
}
nav ul li:hover>ul{
opacity: 1;
position:absolute;
top:98%;
left:0;
}
nav ul li a:hover {
color: #fff;
background-color: #cc3300
}
nav ul li.selected a {
color: #fff;
background-color: #cc3300;
}
vielen Dank, krank geben Sie dies einen Versuch – user1563865
Es funktioniert, wenn das Menü nur eine Ebene hat. Mit verschachtelten "ul" ist es nicht. – Moesio