Hsmblada
Neues Mitglied
Hallo alle zusammen,
ich arbeite gerade an einer Website und möchte ein Dropdown-Menü per HTML und CSS erstellen. Gedacht ist eine horizontale Navigationsleiste am oberen Ende der Seite und wenn man über einen Menüpunkt hovert, sollte ein Untermenü vertikal darunter aufklappen. Mein Problem ist aber, dass ich es nicht hinbekomme, die Submenüs richtig unter ihren jeweiligen Menüpunkten anzuordnen, ich habe mal einen Screenshot angehängt, der zeigt, wie es zur Zeit aussieht, aber nicht sein soll. Hier der HTML Ausschnitt:
Und hier der CSS Ausschnitt:
Bin noch Anfänger, also bitte nicht schimpfen, wenn ich was dummes gemacht habe. :grin:
Liebe Grüße,
Hsmblada
Edit: Hoppla, hab den Screenshot vergessen anzuhängen.
ich arbeite gerade an einer Website und möchte ein Dropdown-Menü per HTML und CSS erstellen. Gedacht ist eine horizontale Navigationsleiste am oberen Ende der Seite und wenn man über einen Menüpunkt hovert, sollte ein Untermenü vertikal darunter aufklappen. Mein Problem ist aber, dass ich es nicht hinbekomme, die Submenüs richtig unter ihren jeweiligen Menüpunkten anzuordnen, ich habe mal einen Screenshot angehängt, der zeigt, wie es zur Zeit aussieht, aber nicht sein soll. Hier der HTML Ausschnitt:
Code:
<nav>
<ul id="navbar">
<li id="first_link"><a href="link1.html">News</a></li>
<li class="navitem" id="second link"><a href="link1.html">Live</a></li>
<li class="navitem" id="third link"><a href="link1.html">Band</a>
<ul class="submenu">
<li class="submenu_item"><a href="#">Who</a></li>
<li class="submenu_item"><a href="#">What</a></li>
<li class="submenu_item"><a href="#">Bio</a></li>
</ul>
</li>
<li class="navitem" id="fourth link">
<a href="link1.html">Media</a>
</li>
<li class="navitem" "fifth link">
<a href="link1.html">Links</a>
</li>
<li id="navlogo">
<a href="link1.html"><img src="http://www.html.de/images/small_X.png"></a>
</li>
</ul>
</nav>
Und hier der CSS Ausschnitt:
Code:
nav { width: 1000px;
height: 50px;
margin-top: 10px;
margin-bottom: 10px;
background-image: url(../images/checkerpattern.png);
background-repeat: repeat-x;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
#navbar {
list-style-type: none;
width: 1000px;
}
.navitem a {
position: relative;
width: 166px;
height: 50px;
color: #ffffff;
display: block;
text-decoration: none;
text-align: center;
font-size: 13pt;
font-weight: 400;
text-shadow: 0px 1px 1px #000;
font-family: 'Exo', Arial, sans-serif;
line-height: 50px;
float: left;
-webkit-transition: all 100ms ease-in;
-moz-transition: all 100ms ease-in;
-o-transition: all 100ms ease-in;
transition: all 100ms ease-in;
}
.navitem a:hover {
background: rgba(0,0,0,0.3);
box-shadow: 0 -5px 3px -3px #ff0000;
-webkit-transition: all 100ms ease-in;
-moz-transition: all 100ms ease-in;
-o-transition: all 100ms ease-in;
transition: all 100ms ease-in;
}
.submenu {
position: absolute;
list-style-type: none;
width: 166px;
}
.submenu_item a {
height: 49px;
background: #000000;
border-bottom: 1px solid #ffffff;
display: block;
float: left;
}
Bin noch Anfänger, also bitte nicht schimpfen, wenn ich was dummes gemacht habe. :grin:
Liebe Grüße,
Hsmblada
Edit: Hoppla, hab den Screenshot vergessen anzuhängen.
Zuletzt bearbeitet: