http://blicke-test-hp.npage.de/drop-menue-steffi.html
hatte auch das skrip von den JS befreit wegen den Überblick ! .. man muss jetzt in den CSS dort wo Navigation ist das formatieren ..
Hier das Skript was cih an mein HP habe ...muss jetzt was tun aber schau mir das später an ..kannst aber schon an den CSS üben ...kopiere dir das an den HTML Editor und schau wie weit du das schaffst ....
Code: Alles auswählen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style><!-- a{text-decoration:none} //--></style>
<style><!-- a:hover{text-decoration:underline;} --></style>
<style type="text/css">
#InfoKMC { float:center; margin:5px 0px 0 0; }
#InfoKMC a:link,
#InfoKMC a:visited,
#InfoKMC a:focus { font-weight:normal; border-radius:4px; color:#f4f5ea; margin-right:5px; padding:5px; font-size:14px; font-family:Trebuchet MS, Arial, sans-serif; text-decoration:none; }
#InfoKMC a:hover { background:#f4f5ea; text-shadow:none; color:#669900; box-shadow:0 1px 3px #333; }
#InfoKMC a:active { box-shadow:inset 0 2px 3px #999; margin:0 5px 0 0; color:#000; background:ffffff; text-shadow:0 1px #f4f5ea; }
#InfoKMC a.Aktiv2,
#InfoKMC a.Aktiv2:hover,
#InfoKMC a.Aktiv2:active { box-shadow:none; background:#f4f5ea; text-shadow:none; color:#000; cursor:default; }
#InfoKMC {
-moz-border-radius:6px 6px 0 0;
-webkit-border-radius:6px 6px 0 0;
-khtmlborder-radius:6px 6px 0 0;
border-radius:6px 6px 0 0;
font-size:13px;
font-weight:normal;
font-family:arial;
color:#fff;
text-align: left;
padding:4px 0 3px 5px;
background: #7C704E;
}
.kategorien
{
float: left;
width: 270px;
border: 1px solid #690;
margin: 0 15px 15px 0;
padding: 5px;
}
.clearboth { clear: both; }
.downarrowclass{
position: absolute;
top: 7px;
right: 5px;
}
.rightarrowclass{
position: absolute;
top: 5px;
right: 5px;
}
#navigation{
padding-bottom:10px;
}
#navigation2{
padding-bottom:4px;
padding-top:4px;
}
#navigation3{
padding-bottom:0px;
}
#header{
font-size:13px;
font-weight:normal;
font-family:Trebuchet MS,Arial,Georgia;
color:#000;
text-align: left;
padding:5px 10px 10px 5px;
}
#content {
font-size:13px;
font-weight:normal;
font-family:Trebuchet MS,Arial,Georgia;
color:#000000;
text-align: left;
padding:5px 10px 5px 25px;
}
#sidebar{
font-size:13px;
font-weight:normal;
font-family:Trebuchet MS,Arial,Georgia;
color:#000;
text-align: left;
padding:5px 15px 10px 0;
}
.abgerundet {
-moz-border-radius:10px; /* Firefox */
-webkit-border-radius:10px; /* Safari, Chrome */
-khtml-border-radius:10px; /* Konqueror */
border-radius:10px; /* CSS3 */
}
#footer{
font-size:11px;
font-family:Times New Roman;
font-weight:bold;
color:#000;
text-align: center;
padding-top:8px;
padding-right:0px;
padding-bottom:8px;
padding-left:0px;
}
#headertop p {
margin: 0px;
padding: 0px;
}
#footer p {
margin: 0px;
padding: 0px;
line-height: 40px;
}
#footer{
font-size:11px;
font-family:Times New Roman;
font-weight:bold;
color:#000;
text-align: center;
padding:-5px -5px 0 0;
border-radius:0 0 6px 6px;
background:url(http://file1.npage.de/006308/09/bilder/grafik_footer6.png) repeat-x left top #060;
border-top: 2px ridge #007F46;
line-height: 40px;
height:65px;
}
#headertop {
-moz-border-radius:6px 6px 0 0;
-webkit-border-radius:6px 6px 0 0;
-khtmlborder-radius:6px 6px 0 0;
border-radius:6px 6px 0 0;
font-size:13px;
font-weight:normal;
font-family:arial;
color:#fff;
text-align: right;
padding:6px 10px 3px 5px;
background: #7C704E;
}
.abgerundet {
-moz-border-radius:10px; /* Firefox */
-webkit-border-radius:10px; /* Safari, Chrome */
-khtml-border-radius:10px; /* Konqueror */
border-radius:10px; /* CSS3 */
}
.klasse1 span {
display: none;
}
.klasse1:link, .klasse1:visited {
display: inline;
width: 14px;
height: 14px;
float: left;
background: url(http://file1.npage.de/006308/09/bilder/icon-facebook2.png);
}
.klasse1:hover, .klasse1:active, .klasse1:focus {
display: inline;
width: 14px;
height: 14px;
float: left;
background-image: url(http://file1.npage.de/006308/09/bilder/icon-facebook3.png);
}
.klasse2 span {
display: none;
}
.klasse2:link, .klasse2:visited {
display: inline;
width: 14px;
height: 14px;
float: left;
margin-left: 3px;
background: url(http://file1.npage.de/006308/09/bilder/icon-google2.png);
background-repeat: no-repeat;
}
.klasse2:hover, .klasse2:active, .klasse2:focus {
display: inline;
width: 14px;
height: 14px;
float: left;
margin-left: 3px;
background-image: url(http://file1.npage.de/006308/09/bilder/icon-google3.png);
background-repeat: no-repeat;
}
.klasse3span {
display: none;
}
.klasse3:link, .klasse3:visited {
display: block;
width: 14px;
height: 14px;
float: left;
margin-left: 3px;
background: url(http://file1.npage.de/006308/09/bilder/icon-twitter2.png);
background-repeat: no-repeat;
}
.klasse3:hover, .klasse3:active, .klasse3:focus {
display: block;
width: 14px;
height: 14px;
float: left;
margin-left: 3px;
background-image: url(http://file1.npage.de/006308/09/bilder/icon-twitter3.png);
background-repeat: no-repeat;
}
.klasse4 span {
display: none;
}
.klasse4:link, .klasse4:visited {
display: block;
width: 14px;
height: 14px;
float: left;
margin-left: 3px;
background: url(http://file1.npage.de/006308/09/bilder/icon-rss2.png);
background-repeat: no-repeat;
}
.klasse4:hover, .klasse4:active, .klasse4:focus {
display: block;
width: 14px;
height: 14px;
float: left;
margin-left: 3px;
background-image: url(http://file1.npage.de/006308/09/bilder/icon-rss3.png);
background-repeat: no-repeat;
}
.klasse5 span {
display: none;
}
.klasse5:link, .klasse5:visited {
display: block;
width: 14px;
height: 14px;
float: left;
margin-left: 3px;
background: url(http://file1.npage.de/006308/09/bilder/icon-youtube2.png);
background-repeat: no-repeat;
}
.klasse5:hover, .klasse5:active, .klasse5:focus {
display: block;
width: 14px;
height: 14px;
float: left;
margin-left: 3px;
background-image: url(http://file1.npage.de/006308/09/bilder/icon-youtube3.png);
background-repeat: no-repeat;
</style>
<link href="http://file2.npage.de/011946/71/html/menu-bar.css" type="text/css" rel="stylesheet" />
</head>
<body bgcolor="#D2CBB6">
<table border="0" cellspacing="0" cellpadding="0" align="center" width="970" height="25" >
<tbody>
<tr>
<td id="headertop">
<p style="text-align: left"><span style="font-size: 14px"><span style= "font-family: Trebuchet MS">
<script type='text/javascript'>
<!--
var Datum = new Date();
var Tag = Datum.getDate();
var Monat = Datum.getMonth() + 1;
var Jahr = Datum.getFullYear();
var Stunden = Datum.getHours();
var Minuten = Datum.getMinutes();
if (Minuten <10)
{
Minuten= "0" + String(Minuten); // 0 einfuegen, wenn Minuten <10
}
document.write("Heute ist der " + Tag + "." + Monat + "." + Jahr + " - " + Stunden + ":" + Minuten + " Uhr");
//-->
</script></span></span></p>
</td>
<td id="InfoKMC">
<a href="http://bartagamen-on-tour.de.to/guestbook.html">Gästebuch</a>
<a href="/kontakt.html">Kontakt</a>
<a href="http://bartagamen-on-tour.de.to/impressum.html">Impressum</a>
</td>
<td id="headertop">
<a target="_blank" href="http://www.facebook.com/pages/Bartagamen-on-Tour/357208097698696" class="klasse1"><span>.</span></a>
<a target="_blank" href="https://plus.google.com/108210994179650101011#108210994179650101011/posts" class="klasse2"><span>.</span></a>
<a target="_blank" href="http://twitter.com/planeterde11" class="klasse3"><span>.</span></a>
</td>
</tr>
</tbody>
</table>
<table style="background-image: url(http://file2.npage.de/011946/71/bilder/106photo26.jpg); height: 160px;" align="center" border="0" cellpadding="0" cellspacing="0" width="970" >
<tr><td id="header">
</td></tr>
</table>
<tr>
<td style="background-color: #ffffff" id="navigation">
<div style="width:100%;">
<ul id="menu-bar">
<li class="current"><a href="#">Home;</a></li>
<ul>
<li><a href="#">Seite</a></li>
<li><a href="#">Seite</a></li>
<li><a href="#">Seite</a></li>
<li><a href="#">Seite</a></li>
<li><a href="#">Seite</a></li>
</ul>
</li>
<li class="current"><a href="#">Home</a></li>
<li><a href="#">Products</a>
<ul>
<li><a href="#">Products Sub Menu 1</a></li>
<li><a href="#">Products Sub Menu 2</a></li>
<li><a href="#">Products Sub Menu 3</a></li>
<li><a href="#">Products Sub Menu 4</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Services Sub Menu 1</a></li>
<li><a href="#">Services Sub Menu 2</a></li>
<li><a href="#">Services Sub Menu 3</a></li>
<li><a href="#">Services Sub Menu 4</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<table width="970" cellspacing="0" cellpadding="0" border="0" align="center">
<br style="clear: left" />
</div></div>
</td>
</tr>
</tbody>
</table>
<table width="970" cellspacing="0" cellpadding="0" border="0" align="center">
<tbody>
<tr>
<td style="background-color: #ffffff">
<table width="620" height="500" cellspacing="0" cellpadding="0" border="0" align="left">
<tbody>
<tr>
<td style="background-color: #ffffff" valign="top" id="content">
[/center]
