Hey zusammen,
Ich wollte ein Dropdown-Menu erstellen, ist ja schon fast fertig. Aber eins kappier ich nicht...
Wenn ich mein Überpunkt hover, dann kommen die untermenus, aber dann gehen die anderen überpunkte die nicht gehovert sind mit. Warum denn das ?
Und ich möchte das die Blockelemente von den Untermenus am Obermenu anhängen (das da kein freiraum ist) wie kann ich es machen ? Mit position:absolute?
Hier meine Dateien:
HTML
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title> Test Webseite von Stef</title>
<link href="index.css" rel="stylesheet" type="text/css">
<link rel="icon" href="icons/favicon.jpg" type="img/jpg"> <!-- Favicon eingebunden -->
</head>
<body>
<!------------------ Navigation ---------------------->
<div id="navigation">
<nav>
<ul class="menu">
<li class="top"><a href="#">Home</a>
<ul class="down">
<li class="untermenu"><a href="#">Über uns</a></li>
<li class="untermenu"> <a href="#">Leistungen</a></li>
<li class="untermenu"><a href="#">Websprachen</a></li>
</ul>
</li>
<li class="top"><a href="#">Slideshow</a>
<ul class="down">
<li class="untermenu"><a href="#">Sommer</a></li>
<li class="untermenu"><a href="#">Winter</a></li>
<li class="untermenu"><a href="#">Herbst</a></li>
</ul>
</li>
<li class="top"><a href="#">Bildergalerie</a>
<ul class="down">
<li class="untermenu"><a href="#">Lieblingsbilder</a></li>
<li class="untermenu"><a href="#">Tierbilder</a></li>
<li class="untermenu"><a href="#">Schulbilder</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</body>
</html>
Alles anzeigen
CSS
div#navigation
{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 38px;
background-color: black;
}
ul
{
padding: 0px;
margin: 0px;
list-style-type: none;
}
li.top
{
display: inline-block;
font-weight: bold;
text-align: center;
width: 120px;
}
li.untermenu
{
list-style-type: none;
font-weight: 100;
padding-top: 5px;
width: 120px;
}
a
{
text-decoration: none;
color: aqua;
display: block;
padding: 10px 0px;
}
li.untermenu a
{
color: black;
}
ul.down
{
display: none;
}
li.top a:hover
{
color: yellow;
}
li.top:hover ul.down {
display:block;
background-color: blue;
}
li.untermenu a:hover
{
background-color: antiquewhite;
color: black;
}
Alles anzeigen
Wenn ihr irgendwelche Verbesserungen sieht, oder Fehler. Sagt es mir. Ich möchte ja was lernen.
Hoffe ihr könnt mir helfen.
Stef