nicht angemeldet
Hallo an alle,
bin jetzt schon seit mehreren Tagen dabei an einer Drop-Down-Navi für unsere HP zu basteln. Ist mir auch soweit gelungen, nur fährt sich mein Menu jedes mal wieder zusammen, wenn ich einen Link aus dem Untermenu anklicke, was ich jedoch verhindern will.
Lade euch mal den CSS-Text und den HTML-Code hoch, damit ihr, falls ihr Ideen zu diesem Problem habt, euch vllt melden könnt.
Mfg
Steffen
body {
margin: 0 auto;
padding: 0;
font-family: Arial, Verdana, Sans-Serif;
background: #E7E7E7;
}
a {
text-decoration: none;
color: #074da5;
}
a:hover {
color: #808080;
}
a img {
border: 0;
}
h3 {
font-size: 1.3em;
margin: 0 0 5px 0;
padding: 2px 0px 0px 0px;
border-bottom: 2px solid #eee;
}
.blue {
color: #286ea0;
font-size: 16px;
}
#bg {
width: 760px;
margin: 0 auto;
height: 600px;
padding: 6px 10px 0px 10px;
background: url(bg.gif) no-repeat;
}
#bg2 {
padding: 9px 4px 0 2px;
color: #E7E7E7;
width: 736px;
height: 600px;
}
#navi {
clear: left;
float: left;
width: 150px;
margin: 0 0 10px 0;
padding: 0;
font-size: 0.9em;
}
#navi ul {
list-style: none;
width: 150px;
margin: 0 0 3px 0;
padding: 0;
font-size: 1.1em;
border-right: 2px solid #eee;
}
#navi li {
margin-bottom: 4px;
padding: 0 5px 0 10px;
}
#navi li a {
font-size: 9pt;
font-weight: bold;
text-align: right;
height: 20px;
text-decoration: none;
color: #808080;
display: block;
padding: 6px 10px 0 10px;
background: #fff;
border-bottom: 1px dotted #ccc;
}
#navi li a:hover {
color: #286ea0;
}
#pic {
margin: 0 275px 30px 160px;
line-height: 1.4em;
background: url(pic3.jpg) repeat-x;
height: 153px;
width: 570px;
position: absolute;
}
#pic h2 {
margin: 10px 100px 0 5px;
font-size: 14px;
font-weight: bold;
color: #ffffff;
border-bottom: 1px solid white;
}
#pic p {
margin: 10px 0 0 5px;
color: #f4f4f4;
width: 300px;
font-size: 12px;
font-style: italic;
}
#pic a {
margin: 10px 0 0 5px;
}
.text {
margin: 160px 10px 0 160px;
line-height: 1.6em;
text-align: left;
color: #5D5D5D;
}
.text a, #text a:visited {
text-decoration: underline;
}
.text p {
padding: 0;
margin: 0;
}
#footer {
clear: both;
color: #808080;
background: #FFF;
font-size: 0.8em;
font-weight: bold;
text-align: center;
padding: 5px 10px 5px 0;
margin: 100px 5px 50px 5px;
border: 1px solid #ccc;
}
#footer a {
text-decoration: underline;
color: #3A6794;
}
#footer a:hover {
color: #000;
}
.d1 {
clear: left;
float: left;
width: 145px;
margin: 10px 0 10px 5px;
padding: 0;
font-size: 16px;
color: #074da5;
text-indent: 3px;
font-weight:bold;
padding-top: 2px;
border-bottom: 1px dotted #ccc;
}
.d2 {
clear: left;
float: left;
width: 145px;
margin: 0 0 0 10px;
padding: 0;
font-size: 12px;
color: #074da5;
text-indent: 3px;
font-weight:bold;
padding-top: 2px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="Author" content="Author" />
<meta name="Robots" content="index,follow" />
<meta name="Description" content="Description" />
<meta name="Keywords" content="key, words" />
<link rel="stylesheet" type="text/css" href="images/style.css" />
<script language="JavaScript" type="text/javascript">
function outline(id)
{
if(document.getElementById(id).style.display == 'none')
{
document.getElementById(id).style.display = 'block';
}
else
{
document.getElementById(id).style.display = 'none';
}
}
</script>
</head>
<body>
<div id="bg">
<div id="bg2">
<div id="navi">
<div class="d1"><a href="javascript:;" onclick="outline('p1'); return false;">4Tek</a></div>
<span id="p1" style="display:none"><div class="d2"><a href="index.html">Vision</a></div><br>
<div class="d2"><a href="leitlinien.html">Leitlinien</a></div><br>
<div class="d2"><a href="knowhow.html">KnowHow</a></div><br></span>
<div class="d1"><a href="javascript:;" onclick="outline('p2'); return false;">Lösungen</a></div>
<span id="p2" style="display:none"><div class="d2"><a href="loesungen.html">Konzeption</a></div><br>
<div class="d2"><a href="realisierung.html">Realisierung</a></div><br>
<div class="d2"><a href="service.html">Service</a></div><br></span>
<div class="d1"><a href="javascript:;" onclick="outline('p3'); return false;">Projekte</a></div>
<span id="p3" style="display:none"><div class="d2"><a href="projekte.html">Kunden</a></div><br>
<div class="d2"><a href="callcenter.html">CallCenter-Tool</a></div><br>
<div class="d2"><a href="online.html">Online-Ratgeber-Protal</a></div><br>
<div class="d2"><a href="intranet.html">Integriertes Intranet</a></div><br>
<div class="d2"><a href="firewall.html">Firewall-Lösung</a></div><br></span>
<div class="d1"><a href="javascript:;" onclick="outline('p4'); return false;">Partner</a></div>
<span id="p4" style="display:none"><div class="d2"><a href="partner.html">Microsoft</a></div><br>
<div class="d2"><a href="mcafee.html">McAfee</a></div><br>
<div class="d2"><a href="macromedia.html">Macromedia/Allaire</a></div><br>
<div class="d2"><a href="sterling.html">Sterling Commerce</a></div><br></span>
<div class="d1"><a href="javascript:;" onclick="outline('p5'); return false;">Kontakt</a></div>
<span id="p5" style="display:none"><div class="d2"><a href="kontakt.html">Anschrift</a></div><br>
<div class="d2"><a href="anfahrt.html">Anfahrt</a></div><br>
<div class="d2"><a href="#">Mitarbeiter-Login</a></div><br>
<div class="d2"><a href="#">Kunden-Login</a></div><br></span>
<div class="d1"><a href="sitemap.html">Sitemap</a></div>
</div>
<div id="pic">
<h2>Vision</h2>
<p>Als IT-Dienstleister und Unternehmensberatung unterstützen wir unsere Kunden.</p>
</div>
<div class="text">
<p>Unser Ziel ist die Optimierung unternehmensinterner Prozesse und die langfristige Sicherung des Markterfolges für unsere Kunden.
Die richtige Information zur richtigen Zeit am richtigen Ort. In einer sich permanent und immer schneller verändernden Welt spielen
Informationen eine zentrale Rolle. Ob unternehmensintern oder in der Interaktion mit Kunden, Interessenten oder externen Partnern.
Ob im E-Business oder auf eher klassisch geprägten Geschäftsfeldern. Bereitstellung, Austausch, Verarbeitung, Speicherung und
Aufbereitung aktueller und zuverlässiger Informationen sind entscheidend für den Erfolg eines Unternehmens. Diese Informationen so
aufzubereiten, zu analysieren und darzustellen, dass sie für unsere Kunden einen neuen Wert darstellen, ist unser Ziel.</p>
</div>
<div id="footer">4Tek - Gesellschaft für angewandte Informationstechnologien mbH - Luisenstraße 30 - 63067 Offenbach am Main
</div>
</div>
</div>
</body>
</html>