nicht angemeldet
Rolf BHallo Joseba,
ich weiß nicht warum es funktioniert hat als das Computer-Menü links war. Vielleicht hast Du etwas nicht übernommen.
Wenn ein Element position:absolute ist, dann beziehen sich left, top, right und bottom nicht auf sein direktes Parent-Element, sondern der Browser sucht in der Parent-Hierarchie so lange, bis er ein Element findet, das nicht position:static ist (static ist der Default-Value). Gibt es keins, wird das <html> Element als Bezugspunkt genommen. Deswegen erscheint dein Menü oben links am Bildschirmrand. Du brauchst die CSS Regel
.dropdown {
position: relative;
}
und dann musst Du die Eigenschaften left und top von .dropdown-content so setzen, dass das Menü an der richtigen Stelle erscheint. Das kannst Du in der .dropdown-content Regel machen; in der .dropdown:hover .dropdown-content Regel brauchst Du nur das display:block
Dann noch ein paar Tipps:
- es ist nicht gut, wenn Du
.dropdown aein padding-left von 500px gibst, um den Abstand zwischen den Menüs zu erhalten. Das macht man mit zwei Listen und einer Flexbox für das nav Element:
<nav id="navs">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="about_us.php">About Us</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
<ul>
<li class="dropdown">
<a href="#" class="dropbtn">Computer</a>
<div class="dropdown-content">
<a href="windows.php">Windows</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</div>
</li>
<li><a href="#">News</a></li>
<li><a href="#">Bucher</a></li>
</ul>
</nav>
Dazu diese CSS Änderungen. Die Kommentare sind nur zum Markieren der Änderung :)
display:block und font-size: 17px musst Du von .dropdown a entfernen. Der display:block führt dazu, dass die Menüs nicht auf gleicher Höhe sind. Es sind jetzt 2 ul, deswegen setzt der Browser die Texte nicht mehr automatisch auf gleiche Höhe.
nav { background-color: #d2f5c4; display: flex; }
/* ^^^^^^^^^^^^^^ */
nav ul {list-style-type: none; flex: 1 0 1em;}
/* ^^^^^^^^^^^^^^ */
.dropdown a {
/* LÖSCHEN: */ display: block;
padding: 0; /* <--- */
color: #000;
/* LÖSCHEN: */ font-size: 17px;
}
Rolf
sumpsi - posui - clusi
Matthias Apsel
Gunnar Bittersmann