Navigation Untermenü will nicht nach rechts

vic951 · 13. Juli 2018

Hallo Leute,

ich schaffe es einfach nicht meine Untermenü-Punkte (.drpdwn-content) nach rechts zu bringen. Habe es sowohl mit text-align als auch float versucht jedoch bewegen sich die Unterpunkte keinen Millimeter.

Was mache ich falsch oder habe ich das Untermenü falsch aufgebaut?

meine html-datei

HTML

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width">
<link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
<title>Alexej Kosilov</title>
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./dist/slicknav.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
</head>
<body>
<div class="wrapperh100">
<header>
<a href="./index.html" id="logo"></a>
<ul id="menu">
<li><a href="#">Radio</a></li>
<li><a href="#">1und1</a></li>
<li><a href="#">Kontakt</a></li>
<li class="drpdwn"><a href="#">Links</a>
<ul class="drpdwn-content">
<li><a href="#">Login FB</a></li>
<li><a href="https://kosilov.de">Homepage</a></li>
<li><a href="https://google.de">Google</a></li>
</ul>
</li>
</ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="./dist/jquery.slicknav.js"></script>
<script type="text/javascript">$(document).ready(function(){$('#menu').slicknav();});</script>
</header>
</div>
</body>
</html>

Alles anzeigen

Und meine css Datei

Code

body {
font-family: 'Muli', sans-serif;
margin:0;
padding:0;
font-size:100%;
}
.slicknav_menu {
display:none; /* Smartphoneansicht ausblenden */
}
.wrapperh100{
width: 100vw; /* Volle Breite des Bildschirms, bedeutet keine Scrollbalken */
height: 100vh; /* Volle Höhe des Bildschirms, bedeutet keine Scrollbalken */
}
header{
background-color: #FDFDFD;
width: 100vw;
height: 100px;
}
#logo{
background-image: url(../img/AllnetzLogo2.png); /*Link zu deinem Logo */
background-size: cover; /* Bild soll über das ganze Element gestreckt werden */
height: 60px; /* Die Höhe des Logos */
width: 175px; /* Die Breite des Logos */
float: left; /* Richtet das Bild auf der linken Seite aus */
margin-left: 5vw; /* Der Abstand zum linken Bildschirmrand beträgt 5% der Bildschirmbreite */
margin-top: 20px; /* Der Abstand zum oberen Bildschirmrand beträgt 20 Pixel */
}
#menu{
float: right; /* Richtet das Menü auf die rechte Seite aus */
list-style: none; /* Entfernt die Auflistungszeichen der Links im Menü */
margin-right: 5vw; /* Der Abstand vom rechten Bildschirmrand zum Menü sind 5% der Bildschirmbreite */
margin-top: 35px; /* Der Abstand zum oberen Bildschirmrand beträgt 20 Pixel */
}
#menu li{
float: left; /* Richtet die Elemente im Menü nach links aus */
padding-right: 3vw; /* Der Innenabstand nach rechts beträgt 3% des Bildschirms */
}
#menu li a{
text-decoration: none; /* Entfernt das Unterstreichen der Links im Menü */
color: #0071bc; /* Die Farbe der Links im Menü */
font-size: 1.5em; /* Schriftgröße des Menüs */
transition-duration: 0.4s;
}
#menu li a:hover{
color: #999;
}
.drpdwn-content {
display: none; /* Unterpunkte ausblenden */
position: absolute; /* Damit kann man Elemente einfach postionieren wo man will */
background-color: rgba(200,200,200,0.5); /* Farbe des Untermenüs */
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Schatten des Untermenüs */
z-index: 1000; /* Damit das Untermenü immer über all den anderen Elementen ist */
list-style: none; /* Damit keine Auflistungszeichen gezeigt werden */
margin-left: -15vw; /* Damit das Untermenü 15% der Bildschirmbreite nach links verschoben wird */
margin-right: 0; /* Damit das Untermenü rechts bündig ist */}
#menu li ul a{ text-decoration: none !important;}
#menu li ul li:first-child{margin-top: 30px;}
#menu li ul li:last-child{margin-bottom: 30px;}
.drpdwn:hover .drpdwn-content{ display: block; }
/*--------------------------------------------------------------------------------------*/
/* Alles was hier steht wird geändert wenn die Seite auf dem Smartphone angeschaut wird */
@media screen and (max-width: 40em) {
.js #menu { display:none; /* Deaktiviert PC-Ansicht */}
header{ display: none; /* Deaktiviert PC-Ansicht */}
.js .slicknav_menu { display:block; /* Aktiviert Smartphonemenü */}
}

Alles anzeigen

Arne Drews · 13. Juli 2018

Du stellst mit #menu li { float:left; } das floating für alle <li> unterhalb von #menu.

Das musst Du natürlich für das Dropdown aufheben und dann nur noch Dein margin:-15vw; anpassen.

Die Frage ist auch, ob Du mit flex nicht auch besser dran wärst...

vic951 · 13. Juli 2018

oh mein Gott es war so einfach vielen dank ich habe so lange rum probiert.

Fals noch jemand dieses Problem hat, ich habe es dann mit folgender Zeile gelöst:

Code

#menu li ul li{ float: right !important;}

ja mit flex habe ich schon etwas gearbeitet nur steige ich da noch nicht durch bzw. bin ich so schneller zum Ziel gekommen werde es aber nach dem diese Seite fertig ist angreifen.

Arne Drews · 13. Juli 2018

Sprich Deine Elemente direkter an, !important ist kein guter Stil und sollte eine Ausnahme bleiben.

vic951 · 13. Juli 2018

Ok wie spreche ich es denn direkter an, damit ich !important verhindern kann?

Arne Drews · 13. Juli 2018

Das ist jetzt in der Kürze nicht so einfach erklärbar.

Schau Dir mal die Prioritäten/Spezifitäten der Selektoren an: https://developer.mozilla.org/…s/Web/CSS/Spezifit%C3%A4t

Es gibt aber fast immer einen Weg ohne !important

vic951 · 13. Juli 2018

Alles klar super danke ich Speicher es mal ab

Sultaninchen · 4. Januar 2021

Hallo,

ich habe glaube ich, dasselbe Problem. Meine Unterpunkte liegen seitlich versetzt unter dem Hauptmenü. Allerdings sollen diese genau unter dem jeweiligen Hauptmenü liegen.

So sieht es in html aus:

<li><a href="mia.html">Unsere Mia</a></li>

<li>

<a href="">Allgemeines</a>

<ul>

<li><a href="labrador.html">Labrador</a></li>

<li><a href="ridgeback.html">Ridgeback</a></li>

</ul>

</li>

<li>

<a href="">Sportarten</a>

<ul>

<li><a href="agility.html">Agility</a></li>

<li><a href="dummytraining.html">Dummytraining</a></li>

</ul>

</li>

<li><a href="impressum.html">Impressum und Kontakt</a></li>

</ul>

Und in CSS so:

#navibereich {

background-color: grey;

padding: 5px 25px 5px 25px; /* Innenabstand */

text-align: center;

height: 68px;

}

#navibereich li {

display: inline-block; /*nebeneinander anzeigen */

list-style-type: disc;

margin-left: 80px;

margin-right: 80px;

}

a {

margin: 0 3px;

}

#navibereich a:hover {

background-color: grey;

width: 100px;

}

li {

float: left;

}

ul {

list-style-type: disc;

margin: 2;

padding: 2;

}

ul li {

float: left;

position: relative;

}

li a {

display: block;

width: 100px;

}

ul li ul {

display: none;

position: absolute;

}

ul li:hover ul {

display: block;

background-color: #626262 ;

color: black;

}

ul li:hover ul a {

display: block;

width: 30px;

}

ul li ul li a:hover {

display: block;

width: 100px;

color: black;

}

.site-nav-list {

background-color: #333;

padding: 0.1em;

}

.site-nav-list li {

display: inline;

margin-right: 1em;

}

.site-nav-list a {

padding: 1px 2px;

color: grey;

text-decoration: none;

}

Was mache ich falsch bzw. fehlt etwas?

Danke für eure Hilfe und einen schönen Abend

Nancy

Sempervivum · 4. Januar 2021

Hallo Nancy und willkommen im Forum!

Du machst nicht direkt etwas falsch, dass diese Listenpunkte nach rechts versetzt sind, liegt daran, dass für ul per default ein padding-left definiert ist. Setzt man dieses auf 0 rutschen sie nach links, allerdings hat dann die Tatsache, dass Du float verwendest, den unangenehmen Nebeneffekt, dass sie dann nebeneinander angeordnet werden. Dies kannst Du wiederum beheben, indem Du sie mit flex statt float anordnest. So funktioniert es bei mir:

Code

ul {
/* Listenpunkte nebeneinander anordnen */
display: flex;
list-style-type: disc;
/* Bei den folgenden Regeln fehlte die Maßeinheit */
margin: 2px;
padding: 2px;
}
ul li ul {
display: none;
position: absolute;
/* dies sorgt dafür, dass die Listenpunkte
mit dem des li darueber auf eine Linie liegen */
padding-left: 0;
}
ul li:hover ul {
/* Listenpunkte untereinander anordnen */
display: flex;
flex-direction: column;
background-color: #626262;
color: black;
}

Alles anzeigen

Dies ist kein Einzelfall, dass die Verwendung von float unerwünschte Nebenwirkungen hat, daher empfehle ich generell, dich mit Flexlayout vertraut zu machen:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

BTW: Beim Posten von Code besser Codetags verwenden, das </> in der Werkzeugleiste rechts oben.

Sultaninchen · 5. Januar 2021

Hallo und vielen Dank für die schnelle Antwort!

Du hast mir sehr geholfen. Die Unterpunkte sind zwar nach links gerutscht, aber leider nicht so weit, dass sie jetzt richtig unter dem Hauptpunkt stehen.

Kann ich das irgendwie einstellen, dass sie noch weiter nach links rutschen?

Danke und einen schönen Tag

Sempervivum · 5. Januar 2021

Bei mir waren sie genau untereinander, aber es kann sein, dass ich etwas von dem CSS vergessen habe zu posten. Poste doch noch Mal das neue CSS.

Sultaninchen · 5. Januar 2021

Kann es vielleicht noch an einer anderen Einstellung in meinem CSS liegen?

Das ist der Code:

Code

#navibereich a:hover {
background-color: grey;
width: 100px;
}
li {
float: left;
}
ul {
display: flex;
list-style-type: disc;
margin: 2px;
padding: 2px;
}
ul li {
float: left;
position: relative;
}
li a {
display: block;
width: 100px;
}
ul li ul {
display: none;
position: absolute;
padding-left: 10;
}
ul li:hover ul {
display: flex;
flex-direction: column;
background-color: #626262;
color: black;
}
ul li:hover ul a {
display: block;
width: 30px;
}
ul li ul li a:hover {
display: block;
width: 100px;
color: black;
}
.site-nav-list {
background-color: #333;
padding: 0.1em;
}
.site-nav-list li {
display: inline;
margin-right: 1em;
}
.site-nav-list a {
padding: 1px 2px;
color: grey;
text-decoration: none;
}

Alles anzeigen

basti1012 · 5. Januar 2021

Ich schmeiiße mal

https://developer.mozilla.org/…b/CSS/list-style-position

im Raum, vielleicht könnt ihr damit auch etwas nach helfen

Sempervivum · 5. Januar 2021

Da gibt es jetzt noch dieses Margin:

Code

ul {
display: flex;
list-style-type: disc;
margin: 2px;
padding: 2px;
}

Das führt dazu, dass das Untermenü etwas nach rechts gerückt ist. Wenn ich es lösche sind die Punkte genau untereinander:

align-submenu.png

Sempervivum · 5. Januar 2021

PS: Ich vergaß: Da ist noch ein Fehler im CSS:

Code

ul li ul {
display: none;
position: absolute;
padding-left: 10;
}

Das Padding braucht eine Einheit, wenn es ungleich 0 ist, in diesem Fall muss es jedoch gleich 0 sein, dann kann man sie weg lassen.

Sultaninchen · 5. Januar 2021

Das margin war dafür da, dass die Leiste nach oben gerutscht ist. Wenn ich das lösche, dann rutscht die Navigation nach unten.

Leider wollen die Unterpunkte noch immer nicht so, wie ich es will

tk1234 · 5. Januar 2021

vic951 schrieb:

Was mache ich falsch oder habe ich das Untermenü falsch aufgebaut?

Oder. Das Untermenü taugt überhaupt nichts: es ist per Tastatur garnicht und am Touch-Display nur umständlich bedienbar.

Sempervivum · 5. Januar 2021

Du kannst das Margin auch auf die erste Stufe der Navigation beschränken:

Code

ul {
display: flex;
list-style-type: disc;
}
ul.submenu {
margin: 2px;
padding: 2px;
}

Außerdem hast Du da immer noch floats drin, lösche diese besser. Flex setzt sich zwar durch, aber die floats sind verwirrend.

Sempervivum · 5. Januar 2021

Oder meinst Du diesen Effekt:

align-submenu-2.png

Das kannst Du ganz leicht beheben durch align-items: flex-start;, dann rutscht das Untermenü auch nach oben.

Sultaninchen · 5. Januar 2021

Jetzt hat es geklappt, vielen Dank!!!!

Tags