Hallo!
Ich bin gerade dran eine Navigationsleiste zu basteln. Natürlich weiß ich dass es hunderte Vorlagen und Beispiele gibt, allerdings sind die zum Teil sehr unvertändlich bzw. altmodisch gestaltet.
Jetzt als ersten Schritt möchte ich die Menüelemente mit ihren Submenüs anzeigen lassen, da ich später das Ganze mit JQuery animieren will.
So weit so gut, allerdings habe ich große Probleme beim Formatieren meiner Liste die das Menü werden soll. So sind meine Menüs aufgebaut.
Weiter unten werden die restlichen Tags geschlossen. Mit CSS will ich nun die Submenüs unter den jeweiligen Menüs darstellen, was ich auch geschafft habe, allerdings sind es nicht die richtigen Submenüs. :?
Beispiel: Unter Parent 01 werden Submenüs von Parten 02 und Parent 03 dargestellt.
Mit CSS habe ich das so formatiert:
Es ist alles in HTML5 programmiert, was allerdings nicht der Große unterschied sein sollte.
Eigentlich habe ich schon eine Menge mit CSS und HTML gemacht, allerdings tu ich mir mit solchen Dingen noch sehr schwer..
Würde mich über eine Korrektur freuen!
mfg
Ich bin gerade dran eine Navigationsleiste zu basteln. Natürlich weiß ich dass es hunderte Vorlagen und Beispiele gibt, allerdings sind die zum Teil sehr unvertändlich bzw. altmodisch gestaltet.
Jetzt als ersten Schritt möchte ich die Menüelemente mit ihren Submenüs anzeigen lassen, da ich später das Ganze mit JQuery animieren will.
So weit so gut, allerdings habe ich große Probleme beim Formatieren meiner Liste die das Menü werden soll. So sind meine Menüs aufgebaut.
HTML:
<body>
<header id="page_header">
<img src="images/header.png" id="header_img">
<nav>
<ul>
<li><a href="#">Parent 01</a>
<ul>
<li><a href="#">01 Item 01</a></li>
<li><a href="#">01 Item 02</a></li>
<li><a href="#">01 Item 03</a></li>
<li><a href="#">01 Item 04</a></li>
</ul>
</li>
<li><a href="#">Parent 02</a>
<ul>
<li><a href="#">02 Item 01</a></li>
<li><a href="#">02 Item 02</a></li>
</ul>
</li>
.. und so weiter
Weiter unten werden die restlichen Tags geschlossen. Mit CSS will ich nun die Submenüs unter den jeweiligen Menüs darstellen, was ich auch geschafft habe, allerdings sind es nicht die richtigen Submenüs. :?
Beispiel: Unter Parent 01 werden Submenüs von Parten 02 und Parent 03 dargestellt.
Mit CSS habe ich das so formatiert:
Code:
header#page_header{
width: 100%;
text-align: center;
margin-top: 40px;
margin-bottom: 30px;
}
header#page_header nav {
display:block;
position:relative;
}
header#page_header nav ul {
padding:0;
margin:0;
}
header#page_header nav li {
float:left;
list-style-type:none;
}
header#page_header nav ul:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
header#page_header nav li a {
display:block;
padding:10px 20px;
}
header#page_header nav ul ul {
display:block;
position:absolute;
top: 39px;
left: 0px;
}
header#page_header nav ul ul li {
float:none;
}
header#page_header nav ul ul a {
padding:10px 20px;
border-left:none;
border-right:none;
font-size:14px;
width: 150px;
text-align: left;
}
Es ist alles in HTML5 programmiert, was allerdings nicht der Große unterschied sein sollte.
Eigentlich habe ich schon eine Menge mit CSS und HTML gemacht, allerdings tu ich mir mit solchen Dingen noch sehr schwer..
Würde mich über eine Korrektur freuen!
mfg