Drop Down
Dies ist der Coder zur Darstellung, jedoch müssen Menü, Namen, Größe und Link-Adressen ergänzt bzw. geändert Werden
<head>
<title>.</title>
<style type="text/css" media="screen">
body { text-align:center; background:#fff; font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; margin:10; padding:0; padding-left: 0px;
padding-right: 0px; }
#page { width:984px; text-align:left; background:#FFF; border:0px solid #fff; margin:42px auto; padding:0em; }
h1 { font-family:"Trebuchet MS", Verdana, Geneva, Arial, Helvetica, sans-serif; font-weight:normal; margin:0 0 0.5em 0; }
.clear { clear:both; }
/*###################*/
/* Beginn Navigation */
/*###################*/
#navi, #navi ul { list-style-type:none; margin:0; padding:40; padding-left: 0px; display:block;
padding-right: 0px; }
/* Style-Reset */
#navi li { width:100px; margin-left: 10px; display:block;
float:left; }
/* Horizontale Anordnung */
#navi li ul { display:none; } /* Normalzustand eingeklappt */
#navi li:hover ul { display:block; position:absolute;}
/* Ausgeklappt */
/*###################*/
/* Styles fuers Auge */
/*###################*/
#navcontainer { height:42px; position:left; padding-left: 10px; padding-top: 0px; background: url(http://www.loaditup.de/files/589717.jpg);
padding-right: 0px; }
#navi { position:left; }
#navi li { border:0px solid #000; margin:0 32px 0 0; }
#navi ul li { border:none; margin:0; padding-left: 0px;
padding-right: 0px; }
#navi a { font-weight:bold; height: 35px; text-align:center; display:block; background: url(http://www.loaditup.de/files/589717.jpg) padding:0.2em; }
#navi a:link{color:#fgh; height: 32px; background: url(http://www.loaditup.de/files/589717.jpg); text-decoration:none; }
#navi a:visited { color:#928F8F; height: 30px; padding-top: 4px; margin-top: 0px; background: url(http://www.loaditup.de/files/589717.jpg); text-decoration:none; }
#navi a:active, #navi a:hover { color:#fff; height: 30px; padding-top: 9px; margin-top: 0px; background: url(http://www.templatemo.com/templates/templatemo_112_pro_studio/images/templatemo_footer_repeat.jpg); text-decoration:none; }
</style>
<!--[if lte IE 6]>
<style type="text/css" media="screen">#navi { behavior:url("csshover.htc"); }</style>
<![endif]-->
</head>
<body>
<div id="page">
<h1>Navigation</h1>
<div id="navcontainer">
<ul id="navi">
<li><a href="Link ">Link-Name</a></li>
<li><a href="#">Drop Down Menü Name</a>
<ul>
<li><a href="Link">Untermenü Name</a>
<a href="Link ">Untermenü Name</a></li>
</ul>
</li>
<li><a href="#">Drop Down Menü Name</a>
<ul>
<li><a href="Link">Unter Menü Name</a></li>
<li><a href="Link">Unter Menü Name</a></li>
</ul>
</li><li><a href="Link">Link-Name</a></li>
<li><a href="Link">Link-Name</a>
<li><a href="Link">Link-Name</a></li>
</ul>
</div>
<div class="clear"></div>
<div class="clear"></div>
</div>
</body></html>
<title>.</title>
<style type="text/css" media="screen">
body { text-align:center; background:#fff; font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; margin:10; padding:0; padding-left: 0px;
padding-right: 0px; }
#page { width:984px; text-align:left; background:#FFF; border:0px solid #fff; margin:42px auto; padding:0em; }
h1 { font-family:"Trebuchet MS", Verdana, Geneva, Arial, Helvetica, sans-serif; font-weight:normal; margin:0 0 0.5em 0; }
.clear { clear:both; }
/*###################*/
/* Beginn Navigation */
/*###################*/
#navi, #navi ul { list-style-type:none; margin:0; padding:40; padding-left: 0px; display:block;
padding-right: 0px; }
/* Style-Reset */
#navi li { width:100px; margin-left: 10px; display:block;
float:left; }
/* Horizontale Anordnung */
#navi li ul { display:none; } /* Normalzustand eingeklappt */
#navi li:hover ul { display:block; position:absolute;}
/* Ausgeklappt */
/*###################*/
/* Styles fuers Auge */
/*###################*/
#navcontainer { height:42px; position:left; padding-left: 10px; padding-top: 0px; background: url(http://www.loaditup.de/files/589717.jpg);
padding-right: 0px; }
#navi { position:left; }
#navi li { border:0px solid #000; margin:0 32px 0 0; }
#navi ul li { border:none; margin:0; padding-left: 0px;
padding-right: 0px; }
#navi a { font-weight:bold; height: 35px; text-align:center; display:block; background: url(http://www.loaditup.de/files/589717.jpg) padding:0.2em; }
#navi a:link{color:#fgh; height: 32px; background: url(http://www.loaditup.de/files/589717.jpg); text-decoration:none; }
#navi a:visited { color:#928F8F; height: 30px; padding-top: 4px; margin-top: 0px; background: url(http://www.loaditup.de/files/589717.jpg); text-decoration:none; }
#navi a:active, #navi a:hover { color:#fff; height: 30px; padding-top: 9px; margin-top: 0px; background: url(http://www.templatemo.com/templates/templatemo_112_pro_studio/images/templatemo_footer_repeat.jpg); text-decoration:none; }
</style>
<!--[if lte IE 6]>
<style type="text/css" media="screen">#navi { behavior:url("csshover.htc"); }</style>
<![endif]-->
</head>
<body>
<div id="page">
<h1>Navigation</h1>
<div id="navcontainer">
<ul id="navi">
<li><a href="Link ">Link-Name</a></li>
<li><a href="#">Drop Down Menü Name</a>
<ul>
<li><a href="Link">Untermenü Name</a>
<a href="Link ">Untermenü Name</a></li>
</ul>
</li>
<li><a href="#">Drop Down Menü Name</a>
<ul>
<li><a href="Link">Unter Menü Name</a></li>
<li><a href="Link">Unter Menü Name</a></li>
</ul>
</li><li><a href="Link">Link-Name</a></li>
<li><a href="Link">Link-Name</a>
<li><a href="Link">Link-Name</a></li>
</ul>
</div>
<div class="clear"></div>
<div class="clear"></div>
</div>
</body></html>