Drop down menü mit CSS!

Das Gelbe vom Ei · 28. Januar 2008

Hallo.

ich versuche jetzt schon ziehmlich lange ein dropdown menü in css hinzukriegen. Nur leider funktioniert das nicht. Würde mich freuen wenn mir da wer helfen könnte. Poste mal die html und css Datei.

HTML:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta name="Keywords" content="your, keywords" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Distribution" content="Global" />
<meta name="Robots" content="index,follow" />

<link rel="stylesheet" href="images/style.css" type="text/css" />

<title></title>

</head>

<body>
<!-- wrap starts here -->
<div id="wrap">

	<div id="header">
		<div id="header-content">

		<h1 id="logo"><a href="index.html" title="">Ferien<span class="gray">wohnung</span></a></h1>
		<h2 id="slogan">...In der L&uuml;neburger Heide</h2>

		<!-- Menu Tabs -->

		</div>
			<ul id="header-content">
				<ul>
					<li><a href="#">Home</a>
						<ul>
							<li><a href="#">G&auml;stebuch</a></li>

							<li><a href="#">Wir &uuml;ber uns</a></li>
							<li><a href="#">Ausflugsziehle</a></li>
							<li><a href="#">FAQ</a></li>
							<li><a href="#">Freizeitaktivitäten </a></li>
							<li><a href="#">Impressum</a></li>
						</ul>

					</li>
					<li><a href="#">Das Haus</a>
						<ul>
							<li><a href="#">Geschichte</a></li>
							<li><a href="#">Infos</a></li>
							<li><a href="#">Familie</a></li>
							<li><a href="#">Fotos</a></li>

						</ul>
					</li>
					<li><a href="#">Der Hof</a>
						<ul>
							<li><a href="#">Allgemein</a></li>
							<li><a href="#">Wiesen</a></li>
							<li><a href="#">Spiel & Spa&szlig;</a></li>

							<li><a href="#">Rund her rum</a></li>
						</ul>
					</li>
					<li><a href="#">Die Wohnung</a>
						<ul>
							<li><a href="#">Die Zimmer</a></li>
							<li><a href="#">Einrichtung</a></li>

							<li><a href="#">Saison</a></li>
							<li><a href="#">Kosten</a></li>
							<li><a href="#">Buchen</a></li>
						</ul>
					</li>
					<li><a href="#">Pferde</a>
						<ul>

							<li><a href="#">Unsere Pferde</a></li>
							<li><a href="#">St&ouml;lle</a></li>
							<li><a href="#">Boxen</a></li>
							<li><a href="#">Reitwiese</a></li>
							<li><a href="#">Reit Ziele</a></li>
						</ul>

					</li>
				</ul>
			</div></div>
		<div class="headerphoto"></div>

		</div>
	</div>

</div>

</body>


</div>

</body>
</html>

Hier dann die CSS Datei

HTML:

* { padding: 0; margin: 0; }

body {
	margin: 0; 	padding: 0;
	font: normal 73%/1.5em 'Trebuchet MS', Tahoma, sans-serif;
	color: #555;
	background: #FFF url(bg.jpg) repeat-x;
	text-align: center;
}

/* links */
a { background: inherit; color: #72A545; text-decoration: none; }
a:hover { background: inherit; color: #006699; text-decoration: underline; }

/* headers */
h1, h2, h3 { font: bold 1em 'Trebuchet MS', Tahoma, Sans-serif; }
h1 { font-size: 1.4em; color: #65944A; }
h2 { font-size: 1.2em; text-transform: uppercase; }
h3 { font-size: 1.2em; }

p, h1, h2, h3 {
	margin: 10px 15px;
}
ul, ol {
	margin: 10px 30px;
	padding: 0 15px;
}

/* images */
img {
	border: 1px solid #DADADA;
	padding: 5px;
	background: #FAFAFA;
}
img.float-right {
  margin: 5px 0px 5px 15px;
}
img.float-left {
  margin: 5px 15px 5px 0px;
}

code {
  margin: 5px 0;
  padding: 10px;
  text-align: left;
  display: block;
  overflow: auto;
  font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace;
  /* white-space: pre; */
  background: #FAFAFA;
  border: 1px solid #f2f2f2;
  border-left: 3px solid #72A545;
}
acronym {
  cursor: help;
  border-bottom: 1px solid #777;
}
blockquote {
	margin: 15px; 	padding: 0 0 0 20px;
  	background-color: #FAFAFA;
	background-position: 8px 10px;
	border: 1px solid #f2f2f2;
	border-left: 3px solid #72A545;
	font: bold 1.2em/1.5em "Trebuchet MS", Tahoma, sans-serif;
	color: #666666;
}

/* start - table */
table {
	border-collapse: collapse;
	margin: 10px 15px;
}
th strong {
	color: #fff;
}
th {
	background: #74A846;
	height: 29px;
	padding-left: 11px;
	padding-right: 11px;
	color: #fff;
	text-align: left;
	border-left: 1px solid #B6D59A;
	border-bottom: solid 2px #FFF;
}
tr {
	height: 30px;
}
td {
	padding-left: 11px;
	padding-right: 11px;
	/* border-left: 1px solid #FFE1C3; */
	border-left: 1px solid #FFF;
	border-bottom: solid 1px #ffffff;
}
td.first,th.first {
	border-left: 0px;
}
tr.row-a {
	background: #F8F8F8;
}
tr.row-b {
	background: #EFEFEF;
}
/* end - table */

/* form elements */
form {
	margin:10px 15px; padding: 0;
	border: 1px solid #f2f2f2;
	background-color: #FAFAFA;
}
label {
	display:block;
	font-weight:bold;
	margin:5px 0;
}
input {
	padding: 2px;
	border:1px solid #eee;
	font: normal 1em "Trebuchet MS", Tahoma, sans-serif;
	color:#777;
}
textarea {
	width:400px;
	padding:2px;
	font: normal 1em "Trebuchet MS", Tahoma, sans-serif;
	border:1px solid #eee;
	height:100px;
	display:block;
	color:#777;
}
input.button {
	margin: 0;
	font: bold 1em Arial, Sans-serif;
	background: #FFF url(gradientbg.jpg) repeat-x;
	padding: 2px 3px;
	color: #333;
	border: 1px solid #DADADA;
}

/* search form */
.searchform {
	background-color: transparent;
	border: none;	margin: 0; padding: 0;
}
.searchform p { margin: 10px; padding: 0; }
.searchform input.textbox {
	width: 130px;
	color: #333;
	height: 20px;
	padding: 2px;
	vertical-align: top;
}
.searchform input.button {
	font: bold 12px Arial, Sans-serif;
	color: #333;
	width: 60px;
	height: 26px;
	border: 1px solid #DADADA;
	padding: 3px 5px;
	vertical-align: top;
}

/***********************
	  LAYOUT
************************/

#header-content, #content, #footer-content {
	width: 760px;
}

/* header */
#header {
	height: 100px;
	text-align: left;
}
#header-content {
	margin: 0 auto; padding: 0;
	position: relative;
}
#header-content h1#logo {
	position: absolute;
	font: bold 45px 'Trebuchet MS', Sans-serif;
	letter-spacing: -2px;
	color: #FFF;
	margin: 0; padding: 0;

	/* change the values of left and top to adjust the position of the logo */
	top: 0; left: 0px;
}
#header-content h1#logo a {
	text-decoration: none;
	color: #FFF;
}
#header-content #slogan {
	position: absolute;
	font: bold 12px 'Trebuchet Ms', Sans-serif;
	text-transform: none;
	color: #FFF;
	margin: 0; padding: 0;

	/* change the values of left and top to adjust the position of the slogan */
	top: 55px; left: 40px;
}

/* header menu */
#header-content ul {
	position: absolute;
	right: -5px; top: 15px;
	font: bolder 1.0em 'Trebuchet MS', sans-serif;
	color: #FFF;
	list-style: none;
	margin: 0; padding: 0;
}

#header-content li {
	display: inline;
	float: left;
}
#header-content li a {
	float: left;
	display: block;
	padding: 3px 12px;
	color: #FFF;
	background-color: #333;
	text-decoration: none;
	border-right: 1px solid #272727;
}
#header-content li a:hover {
	background: #65944A;
	color: #FFF;
}
#header-content li a#current  {
	background: #65944A;
	color: #FFF;
}
#header-content li ul {
display:none;
float:left;
margin:0px 85px 0px 0px;
top:24px;
}

#header-content li:hover ul { display:block; }


/* header photo */
.headerphoto {
	margin: 0 auto;
	width: 770px;
	height: 200px;
	padding: 15px 10px 10px 10px;
	background: #FFF url(headerphoto.jpg) no-repeat center;
}

/* content */
#content-wrap {
	clear: both;
	float: left;
	width: 100%;
}
#content {
	text-align: left;
	padding: 0;
	margin: 0 auto;
}

/* sidebar */
#sidebar {
	float: right;
	width: 30%;
	margin: 0 0 10px 0; padding: 0;
}
#sidebar h1 {
	padding: 10px 0px 5px 10px;
	margin: 0;
	font: bold 1.3em 'Trebuchet MS', Tahoma, Sans-serif;
}
.sidebox {
	background: #F5F5F5;
	border: 1px solid #EFEDED;
	margin-bottom: 10px;
}

/* sidebar menu */
#sidebar ul.sidemenu {
	list-style:none;
	margin: 10px 0 15px 0;
	padding: 0;
	background: #F2F2F2;
}
#sidebar ul.sidemenu li {
	padding: 0px 10px;
}
#sidebar ul.sidemenu a {
	display:block;
	font-weight:normal;
	color: #333;
	height: 1.5em;
	padding:.3em 0 .3em 15px;
	line-height: 1.5em;
	border-bottom: 1px dashed #D4D4D4;
	text-decoration:none;
}
#sidebar ul.sidemenu a.top{
	border-top: 1px dashed #D4D4D4;
}
#sidebar ul.sidemenu a:hover {
	padding: .3em 0 .3em 10px;
	border-left: 5px solid  #65944A;
	color: #65944A;
}

/* main */
#main {
	float: left;
	width: 68%;
	margin: 0 0 10px 0; padding: 0;
}
#main h1 {
	padding: 10px 0px 0px 5px;
	margin: 0 0 0 10px;
	border-bottom: 1px solid #f2f2f2;
	font: normal 1.5em 'Trebuchet MS', Tahoma, Sans-serif;
}
#main ul li {
	list-style-image: url(bullet.gif);
}

.post {
	margin: 0; padding: 0;
	background: #FFF url(gradientbg.jpg) repeat-x;
	border: 1px solid #EFEDED;
}
.post .post-footer {
	background-color: #FAFAFA;
	border: 1px solid #f2f2f2;
	padding: 5px; margin-top: 20px;
	font-size: 95%;
}
.post .post-footer .date {
	background: url('clock.gif') no-repeat 0 center;
	padding-left: 20px; margin: 0 10px 0 5px;
}
.post .post-footer .comments {
	background: url('comment.gif') no-repeat 0 center;
	padding-left: 20px; margin: 0 10px 0 5px;
}
.post .post-footer .readmore {
	background: url('page.gif') no-repeat 0 center;
	padding-left: 20px; margin: 0 10px 0 5px;
}

/* footer */
#footer {
	clear: both;
	margin: 0; padding: 0;
	font: normal .95em/1.6em 'Trebuchet MS', Tahoma, Arial, sans-serif;
	text-align: left;
}

#footer h1, #footer p {	margin-left: 0; }

#footer-content {
	border-top: 1px solid #EAEAEA;
	margin: 0 auto;
	padding-left: 15px;
}
#footer-content a {
	text-decoration: none;
	color: #777;
}
#footer-content a:hover {
	text-decoration: underline;
	color: #333;
}
#footer-content ul {
	list-style: none;
	margin: 0; padding: 0;
}
#footer-content .col {
	width: 32%;
	padding: 0 5px 30px 0;
}
#footer-content .col2 {
	width: 33%;
	padding: 0 0 30px 0;
}

/* alignment classes */
.float-left  { float: left; }
.float-right { float: right; }
.align-left  { text-align: left; }
.align-right {	text-align: right; }

/* additional classes */
.clear { clear: both; }
.gray  { color: #BFBFBF; }

/* dropdown usw */

Danke schonmal im vorraus,
Das Gelbe vom Ei

Maik · 28. Januar 2008

Hi,

sieht so aus, dass dem ul-Element der ersten Ebene eine Breitenangabe, und dem ul-Element der zweiten Ebene eine linke Positionsangabe fehlt, weshalb die horizontalen Submenüs falsch positioniert und zum Teil umgebrochen werden.

Außerdem verwendest du die ID #header-content zweimal, obwohl sie innerhalb eines HTML-Dokuments eindeutig sein muß.

Drop down menü mit CSS!

Das Gelbe vom Ei

Grünschnabel

Maik

Neue Beiträge