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"> <!-- deine Schriftart wird von Google bereitgestellt -->
<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>Und meine css Datei
CSS
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ü */}
}
vielen dank ich habe so lange rum probiert.