Zitat:
|
Auch mit deiner eigentlichen Frage hat es gar nichts zu tun
|
Richtig, Philosphiestunde braut tatsächlich niemand.
Der Code unten funktioniert (ausser für Smartphones) Die Beiten passen sich schön an auch von der Drop-Down Box, keine Verschiebungen. Aber warum?
Erst wenn ich "ungefühlt" verstehe warum, kann ich eine Lösung für kleine Bildschirme finden. Die media query habe ich symbolisch
ausgespart.
HTML-Code:
<style type="text/css">
* {
font-family:Helvetica,Arial,sans-serif;
margin:0;
padding:0;
box-sizing:border-box;
}
.nav-area a {
display:flex;
align-items:center;
justify-content:center;
color:#fff;
background-color:#0e618a;
height:50px;
text-decoration:none;
font-weight:bold;
text-transform:uppercase;
padding: 10px 10px;
}
.nav-area a:hover {
background:#d0dbe0;
color:#000;
}
.nav-area ul {
list-style:none;
display:flex;
}
.nav-area ul li {
position:relative;
width:100%;
text-align:center;
}
.nav-area li:hover .dropdown > li {
top:0px;
display:block;
}
.dropdown li {
display:none;
poistion:relative;
}
.dropdown {
position:absolute;
flex-direction:column;
width:100%;
}
@media(max-width:700px) { {
}
}
</style>
<nav class="nav-area">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Space travel</a>
<ul class="dropdown">
<li><a href="#">Baikonur</a></li>
<li><a href="#">KSC</a></li>
<li><a href="#">Guiana Space Centre</a></li>
</ul>
</li>
<li><a href="#">Astronomy</a>
<ul class="dropdown">
<li><a href="#">Very Large Array</a></li>
<li><a href="#"> Royal O., London</a></li>
<li><a href="#">Cerro Paranal</a></li>
<li><a href="#">Kitt Peak National O.</a></li>
</ul>
</li>
<li><a href="#">Biology</a></li>
<li><a href="#">Science & Arts</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>