liebewinter: Neue link-Menü auf Nav Element legen

Hallo , versuche neuen Link-Menü auf meine nav-Element zu legen …

wie meine Nav-Element gebaut habe,

<ul> <li><a href="about_us.php">About Us</a></li> <li><a href="contact.php">Contact</a></li> </ul> <ul> <li><a href="index.php">Home</a></li> <li class="dropdown"> <a href="#" class="dropbtn">Computer</a> <div class="dropdown-content"> <a href="windows11.php">Windows 11</a> <a href="windows8.php">Windows 8</a> <a href="windows7.php">Windows 7</a> <a href="windows6.php">Windows 6</a> </div> </li> <li><a href="#">News</a></li> <li><a href="#">Bucher</a></li> </ul> </nav>

Der nav-Element wird mit flex display,

nav {background-color: #d2f5c4; display: flex; } nav a{ color: black; text-decoration: none; display: inline; padding: 10px 8px 10px; font-size: 16px; font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif; } nav ul {list-style-type: none; flex: 1 0 auto;} nav li { display: inline-block;} nav ul:nth-of-type(2) { text-align:right; /* beweget computer, News und Bucher */ padding-right:120px; } #navs { padding: 2px 0px 2px; /* Großer Nav , nur Obern und Unten */ }

Das Ganze Code hier

Wenn versuche eine neu Menü-Links auf meine News zu lege,

. . . <li class="new"> <a href="#" class="news">News</a> <div class="new-content"> <a href="#">Reise</a> <a href="#">Urlaub</a> </div> </li> <li><a href="#">Bucher</a></li> </ul> </nav>

bewegt die anderen Links....Kann Bitte jemand helfe mit diesen Probleme , Dake !

Akzeptierte Antworten zum Thema:

  1. Geschafft!

    Als Gestern Müde war , habe vergese das ich gleich mache soll, wie die anderen Links..

    In html habe gebaut

    <ul> <li><a href="about_us.php">About Us</a></li> <li><a href="contact.php">Contact</a></li> </ul> <ul class="melas"> <li><a href="index.php">Home</a></li> <li class="dropdown"> <a href="#" class="dropbtn">Computer</a> <div class="dropdown-content"> <a href="windows11.php">Windows 11</a> <a href="windows8.php">Windows 8</a> <a href="windows7.php">Windows 7</a> <a href="#">Link 4</a> </div> </li> <li class="new"> <a href="#" class="news">News</a> <div class="new-content"> <a href="#">Reise</a> <a href="#">Urlaub</a> </div> </li> <li><a href="#">Bucher</a></li> </ul>

    Dann ,auf meinen Css addieriert die Tag…

    li a:hover, .new:hover .news{ background-color: #f1ebeb; } .new:hover .new-content { display: block; } .new { position: relative; } .new-content a { color: black; padding: 12px 16px; text-decoration: none; /* Bekomme die Liks keine Unten Stricht ....*/ display: block; text-align: left; } .new-content { display: none; /* display wird ausgeschaltet ,aber erlaubt die anderen elemente, position ,background ,.... */ font-size: 12px; position: absolute; /* die stellung folgt der Erste Link(li) */ background-color: #f1f1f1 ; min-width: 10px; /* macht größer die Inneren Links */ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Bau ein Schatte und geben an dem Schatten Farbe */ z-index: 1; /* Zeigen die Ordnung wie die Links gezeigt werden... */ } .new-content { color: black; text-decoration: none; /* Bekomme die Liks keine Unten Stricht ....*/ } .new-content a:hover { background-color: #9f9e9e; }

    Auf meine Media Query Datei addieriert der Großer von meine hover....

    .new-content a {padding: 10px 12px;} .new:hover .new-content { top: 28px}

    Screenshot wie auf dem Desktop aussiehst.…

    Wie meinen neuen Links aussiehst....