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
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ü */}
- }
vielen dank ich habe so lange rum probiert.