Cascading Style Sheet

/*Navigationsleiste*/

#menu { 
width: 150px; 
min-height: 600px; 
float: left;
}
 
#menu ul { 
list-style: none; 
margin: 0; 
padding: 0; 
}
 
#menu a, #menu h2 {
  font: bold 11px/16px arial, helvetica, sans-serif;
  display: block;
  border-width: 1px; 
  border-style: solid; 
  border-color: #ccc #888 #555 #bbb;
  margin: 0; 
  padding: 2px 3px; }
 
#menu h2 { 
color: #FF8635; 
background: #96D12C; 
text-transform: uppercase;
}
 
#menu a { 
color: #000; 
background: #efefef; 
text-decoration: none; 
}
 
#menu a:hover { 
color: #a00; 
background: #fff; 
}


#menu li {
position: relative; 
}
 
#menu ul ul ul {
position: absolute; 
top: 0; 
left: 100%; 
width: 100%; 
}
 
div#menu ul ul ul, div#menu ul ul li:hover ul ul {
display: none;
}
 
div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul {
display: block;
}

Quellcode

<div id="menu">
<ul>
<li><h2>My Hobby's</h2>
<ul>
<li><a href="?file=main">Startseite</a></li>
<li><a href="?file=news">News</a>
<ul>
<li><a href="?file=news">News</a></li>
<li><a href="?file=news_archive">News Archiv</a></li>
</ul>
</li>
<li><a href="?file=projects">Projekte</a>
<ul>
<li><a href="?file=models">Modellflug</a></li>
<li><a href="?file=garden">Garten</a>
<ul>
<li><a href="#">drei b i</a></li>
<li><a href="#">drei b ii</a></li>  
<li><a href="#">drei b iii</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

Quellcode

<div id="content" align="left">
	<div class="oben">
	</div>
		<br>
		<div class="content">
			<p>hier kommt dann wat!</p>
		</div>
</div>

Cascading Style Sheet

#content {
	position: relative;
	top: 0px;
	float: left;
	width: 625px;
	min-height: 640px;
	margin: 0px 0px 0px 0px;
	color: #000000;
	/*background: url("./images/back.gif");*/
	background-repeat:repeat-x;
}

	#content .oben {
    	width: 625px;
		height: 45px;
    	text-align:left;
    	background: url("./images/main.gif");
    	background-repeat:no-repeat;
	}

	#content .content {
    	width: 625px;
		min-height: 1px;
    	text-align:left;
    	background: url("./images/mcbg.gif");
	}

	#content .unten {
    	width: 625px;
		height: 45px;
    	text-align:left;
    	background: url("./images/bottom.gif");
    	background-repeat:no-repeat;
	}

	#content .text {
		margin:0 0 0 20px;
		padding:0;
    	width: 92%;
		color: #eeeeee;
	}
		
	p.newsschreiber{
		font-size: 9px;
		font: arial;
	}

	#content .text:first-line {
             	font-weight: bold;
	}

	#content .center {
		margin:0 0 0 20px;
    	text-align:center;
    	width: 92%;
		color: #eeeeee;
	}

	#content .mitte {
    	text-align:center;
	}


#rechts {
	position: relative;
	float:right;
	width: 179px;
	padding: 0 50px 0px 0px ;   
}	

#footer {
	clear:both;
	width: 625px;
	height: 44px;
	padding: 0px 0px 0px 0px;
	background-image: url("./images/footer.gif");
	margin: 0px 0px 0px 0px;
}