Hallo
ich bin recht neu hier, und habe durch die Suchfunktion dieses Forums leider nicht das Gefunden, was ich suche.
habe ein Menü, das mit dropdown funktioniert. Nun möchte ich dieses Menü positionieren. Leider habe ich noch keine passende Lösung im Internet und hier gefunden.
Das Menü sollte dort Anfangen, wo die Überschrift, die darübersteht auch anfängt. Links von der Überschrift ist ein Bild.
Hier mal der Code:
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hallo</title>
<link href="../css/styles.css" type="text/css"11
rel="stylesheet" />
</head>
<header>
<div id="informationen">
<div class="abschnitt"><img src="#" width="104" height="90" alt="Bild"></div>
<div class="abschnitt zwei"><h1>Willkommen </i></h1></div>
<div class="abschnitt drei"><img src="#" width="104" height="90" alt="bild"></div>
<div class="clear"></div>
</div><div id="menu"><!-- öffnet die Navigationsleiste-->
<ul><!-- öffnet den ersten Themenblock -->
<li><a class="direkt" href="#">Startseite</a></li>
</ul><!--schließt den ersten Themenblock-->
<ul><!-- öffnet den zweiten Themenblock-->
<li><!--öffnet die Listeneinträge zum Thema 2-->
<h3>News</h3>
<ul><!--öffnet Klappnavi vom Thema 2-->
<li><a class="direkt" href="#">Wir suchen Spieler</a></li>
<li><hr></li>
<li><a class="direkt" href="#">Wir suchen Trainer</a></li>
<!--<li><hr></li>
<li><a class="direkt" href="#">Hinweise </a></li>-->
</ul><!--schließt Klappnavi von Thema 2--> </li><!--schließt Listeneinträge von Thema 2--> </ul><!--schließt den zweiten Themenblock--> <ul><!-- öffnet den dritten Themenblock -->
<li><!-- öffnet die Listeneinträge von Thema 3 -->
<h3>Verein</h3>
<ul><!-- öffnet die Klappnavi von Thema 3 -->
<li><a href="#">Anfahrt</a></li>
<li><a href="#">Anmeldung Verein</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Infos</a></li>
<li><a href="#">Antrag</a></li>
</ul><!-- schließt die Klappnavi von Thema 3 -->
</li><!-- schließt die Listeneinträge von Thema 3 -->
</ul><!--schließt den dritten Themenblock-->
<ul><!-- öffnet den vierten Themenblock -->
<li><!-- öffnet die Listeneinträge von Thema 4 -->
<h3>Mannschaften</h3>
<ul><!-- öffnet die Klappnavi von Thema 4 -->
<li class="hide"><a href="#">A-Junioren</a></li>
<li class="hide">><a href="#">B-Junioren</a></li>
<li><a href="#">C-Junioren</a></li>
<li><a href="#">D-Junioren</a></li>
<li> <h3><a href="#">E-Junioren</a></h3>
<ul><!--öffnet die dritte Ebene für die Unterpunkte von 4.1-->
<li><a href="#">E1-Junioren</a></li>
<li><a href="#">E2-Junioren</a></li>
</ul><!--schließt die dritte Ebene für die Unterpunkte von 4.1-->
</li>
<li><a href="#">F-Junioren</a></li>
<li><a href="#">Minis</a></li>
</ul><!-- schließt die Klappnavi von Thema 4 -->
</li><!-- schließt die Listeneinträge von Thema 4 -->
</ul><!--schließt den vierten Themenblock--><ul>
<!-- öffnet den fünften Themenblock -->
<li><a class="direkt" href="#">Jugendvorstand</a></li>
</ul><!--schließt den fünften Themenblock-->
<ul><!--öffnet den sechsten Themenblock--><li>
<a class="direkt" href="#">Trainingsplan</a></li><
/ul><!--schließt den sechsten Themenblock-->
<ul><!--öffnet den siebten Themenblock-->
<li><a class="direkt" href="#">Jugendsatzung</a></li><
/ul><!--schließt den siebten Themenblock-->
<ul><!--öffnet den achten Themenblock-->
<li><!--öffnet die Listeneinträge von Thema 8-->
<h3>Kontakt</h3>
<ul><!--öffnet Klappnavi von Thema 8-->
<li><a href="#">Kontakt</a></li>
<li><a href="#">Impressum</a></li>
<li><a href="#">Datenschutz</a></li>
</ul> <!--schließt Klappnavi von Thema 8-->
</li><!--schließt die Listeneinträge von Thema 8-->
</ul><!--schließt den 8 Themenblock-->
</div><!-- schließt die Menüleiste #menu -->
<div style="clear: both;"> </div>
</header>
</html>CSS:
CSS
#informationen {
border: 3px solid #00007F;
}
.abschnitt {
float: left;
width: 9%;
height: 6em;
background-color: #00007F;
text-align:center;
}
.zwei {
width: 76%;
height: 6em;
background-color: #00007F;
text-top:auto;
padding:0;
}
.drei {
/*margin-left:5px;*/
width: 15%;
height: 6em;
background-color: #00007F;
text-align:left;
}
.clear {
clear: both;
}
h1 {
color:white;
background-color: #00007F;
text-align: Center;
font-size:300%;
}
/*--formatiert die Menüleiste--*/
#menu {
width: 97.9%;
padding: 0 20px;
background: #00007F;
font-family: Verdana;
font-size: 1em;
line-height: 1.5;
float: left;
}
/*--formatiert die Themenblöcke--*/
#menu ul {
float: left;
/*width: 150px;*/
padding:0.8em;
list-style-type: none;
}
/*--definiert die Blocküberschriften--*/
#menu h3 {
font-size: 1em;
text-align: center;
color: white;
border: 1px solid #00007F; /*--erforderlich für IE 7--*/
background: #00007F;
}
/*--definiert die "Drop-Down-Links" im Normalzustand--*/
#menu a {
text-decoration: none;
display: block;
border: 1px solid #00007F;
text-align: center;
background: #00007F;
color: white;
}
/*--definiert die "Drop-Down-Links" im Hoverzustand--*/
#menu a:hover {
color: white;
background: #00007F;
}/*
*verhindert im Zusammenhang mit position absolute bei ul ul
*eine Höhenvergrößerung von #menu beim Hovern--
*/
#menu li {
position: relative;
}
/*--versteckt die "Drop-Down-Links", solange nicht gehovert wird--*/
#menu ul ul {
position: absolute;
z-index: 2;
display: none;
}/*--lässt die Dropdown-Links beim Hovern erscheinen--*/
#menu ul li:hover ul {
display: block;
}/*--definiert einen Einzellink im Normalzustand, wenn kein Drop-Down erforderlich--*/
#menu a.direkt:link {
font-size: 1em;
font-weight: bold;
text-align: center;
color: white;
border: 1px solid #00007F;
background: #00007F;
}
/*--definiert einen Einzellink im Hoverzustand, wenn kein Drop-Down erforderlich--*/
#menu a.direkt:hover {
color: white;
background: #00007F;
border: 1px solid #00007F;
} /*--versteckt die dritte Ebene--*/
#menu ul li:hover ul ul {
display: none;
}/*-- lässt die dritte Ebene beim Hovern über die zweite in Erscheinung treten und nach rechts ausklappen--*/
div#menu ul ul li:hover ul {
display: block;
position: absolute;
top: 0;
left: 100%;
}Für eure Hilfe bin ich sehr Dankbar
Gruß
Tuzi
