Hallo liebe Community,
ich befasse mich erst seit 2 Tagen richtig mit den Themen HTML und CSS.
bin aber der Meinung, das ich trotz meines noch nicht so ausgereiften Wissens eine doch sehr gute erste Seite kreiert habe.
Habe ein Foto als Anlage bei getan. So dort seht ihr das ich oben, wie auch unten eine NAV-Leiste habe.
Nun meine Frage:
Da der Punkt Saison 14/15 noch weitere 3 Unterpunkte enthält, wäre meine Frage, wie schaffe ich es das ich eine Art drop-down-side Menü was nach links einblendet kreieren kann?
Akzeptabel wäre es für mich auch, wenn sich beim drauf klicken auf Saison 14/15 ein kleines Menü darunter öffnen würde, mit den 3 anderen Punkten.
Meine .html:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>BR Rentfort D1</title>
<meta name="description"
content="Willkommen bei der D1 des BV Rentfort. Hier findet ihr alle wichtigen News und Themen zur aktuellen Saison.">
<link href="style.css" type="text/css" rel="stylesheet">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
</header>
<div id="wrapper">
<nav id="steuerungoben">
<div class="menu">
<ul>
<li><a class="menu" href="home.html">Home</a></li>
<li><a class="menu" href="verein.html">Verein</a></li>
<li><a class="menu" href="anfahrt.html">Anfahrt</a></li>
<li><a class="menu" href="kontakt.html">Kontakt</a></li>
</ul>
</div>
</nav>
<nav id="steuerungrechts">
<div class="menu2">
<li><a class="menu2" href="news.html">News</a></li>
<li><a class="menu2" href="termine.html">Termine</a></li>
<li><a class="menu2" href="saison-2014-2015.html">Saison 14/15</a></li>
<li><a class="menu2" href="eltern-sind-vorbilder.html">Eltern-Vorbilder</a></li>
<li><a class="menu2" href="links.html">Links</a></li>
<li><a class="menu2" href="gästebuch.html">Gästebuch</a></li>
</div>
</nav>
<section>
<p><h1>Willkommen bei der U13 des BV Rentfort 1919/46</h1></p>
<p>Wir die 2002er und 2003er der D1, freuen uns euch auf unserer ersten eigenen</p>
<p>Internetseite begrüßen zu dürfen.</p>
<p>Informiert euch umfassend über Themen der aktuellen Saison 2014/2015 u.v.m.</p>
<p>Zu jeden Spiel werdet ihr Spielberichte und auch Fotos finden, zudem würden wir uns freuen,</p>
<p>wenn ihr einen netten Eintrag in unsererm Gästebuch hinterlassen würdet.</p>
<p>Nun wünschen wir euch viel Spaß auf unserern Seiten!</p>
<p><strong><p>eure D1 des BVR!</p></strong></p>
</section>
<footer>
©2014 Dominik Kisker
</footer>
</div>
</body>
</html>und meine .css:
Code
* {
margin: 0;
padding: 0;
}
header, nav, footer, aside, section {
display: block;
}
header {
/*background-color: yellow;*/
background-image: url(img/kopfbild_01.png);
height: 281px;
width: 951px;
margin-left: 280px;
margin-right: 360px;
}
#steuerungoben ul {
list-style-type: none;
margin-left: 69.5px;
padding-top: 9.42px;
word-spacing: 7em;
}
#steuerungoben li {
display: inline;
}
#steuerungoben a {
display: block;
width: 192px;
text-align: center;
line-height: 26px;
float: left;
color: white;
text-decoration: none;
}
#steuerungrechts {
/*background-color: green;*/
width: 150px;
height: 500px;
float: right;
padding-top: 30px;
list-style-type: none;
line-height: 45px;
}
#steuerungrechts ul {
list-style-type: none;
}
#steuerungrechts a {
display: block;
color: white;
text-align: center;
text-decoration: none;
border-bottom: 3px;
border-color: #434343;
border-style: solid;
}
section {
height: 1000px;
width: 600px;
/*background-color: orange;*/
margin-left: 3.5em;
}
footer {
/*background-color: brown;*/
float: right;
padding-top: 585px;
margin-right: 15px;
}
#wrapper {
/*background-color: #eeeeee;*/
background-image: url(img/kopfbild_02.png);
margin: 0 auto;
width: 1024px;
height: 1300px;
margin-bottom: 300px;
background-repeat: no-repeat;
}
body {
text-align: left;
background-image: url(img/background.jpg);
background-attachment: fixed;
font-family: Arial, sans-serif;
}
section p {
display: block;
padding-bottom: 1em;
font-size: large;
border-width: 3px;
}
section h1 {
padding-top: 1.5em;
font-size: xx-large;
}
#menu {
width: 734px;
height: 34.8px;
}
a.menu:link {
color: #000000;
background-color: transparent;
}
a.menu:visited {
color: #000000;
background-color: transparent;
}
a.menu:hover {
color: #4c4c4c;
background-color: #4c4c4c;
}
a.menu:active {
color: #4c4c4c;
background-color: #4c4c4c;
}
#menu2 {
width: 735px;
height: 34.8px;
}
a.menu2:link {
color: #000000;
background-color: transparent;
}
a.menu2:visited {
color: #000000;
background-color: transparent;
}
a.menu2:hover {
color: #4c4c4c;
background-color: #4c4c4c;
}
a.menu2:active {
color: #4c4c4c;
background-color: #4c4c4c;Ich hoffe das ihr mir schnell weiterhelfen könnt, das ist mir extrem wichtig!
Danke !