Moin Moin.
Ich habe den Vorschlag mal übernommen und ein bißchen mit rumgespielt.
Ein paar Sachen bekomme ich nicht hin. Siehe Anhang
Normal, d.h. ohne Mauskontakt, sieht alles super aus.
Bei Mauskontakt habe ich einen unschönen kleinen weißen Balken zwischen Navigation und Inhalt. Bekommt man den irgendwie weg?
Schwerwiegender ist aber mein Problem mit dem Untermenü.
Für die Navigation habe ich die Schriftfarbe blau, bei Mauskontakt wird es dann weiß mit blauem Hintergrund.
Dadurch sind aber die Links in der Subnavigation nicht zu sehen, nur bei Mauskontakt.
Ich bekomme das nicht hin, dass ich für Hauptnavi und Subnavi 2 unterschiedliche Farben definiere. Die Links in der Subnavi sollen immer weiß sein.
Außerdem klappt das Untermenü zu schnell wieder zu, wenn ich z.B. die Maus sehr langsam nach unten bewege kommt es vor, dass das Menü wieder zuklappt bevor ich einen Punkt erreiche.
Meine Wunschoptik habe ich auch mal in den Anhang mit reingepackt.
Wäre das in dieser Art überhaupt möglich oder muss ich mich davon verabschieden?
Ich hoffe, ihr könnt mir da weiterhelfen.
Ach so, den Code setze ich auch mal rein:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Suckerfish</title>
<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
//--><!]]>
</script>
<style type="text/css">
body {
font-family: verdana, arial, helvetica, serif;
}
ul {
padding: 0;
margin: 0;
list-style: none;
FONT-SIZE: 8pt;
COLOR:#033d88;
}
li {
float: left;
position: relative;
padding:0 6px 0 1px;
}
li ul {
display: none;
position: absolute;
top: 1em;
left: 0;
}
li ul li {
float:none;
padding:0;
width:100px;
}
li>ul {
top: auto;
left: auto;
}
ul :hover {
BACKGROUND: #033d88; COLOR: #ffffff
}
li A {
COLOR: #033d88; TEXT-DECORATION: none
}
li:hover ul, li.over ul {
display: block;
BORDER-RIGHT: white 1px solid; BORDER-TOP: white 1px solid; BORDER-LEFT: white 1px solid; BORDER-BOTTOM: white 1px solid;
BACKGROUND: #033d88; COLOR: #ffffff
}
</style>
<base target="_self">
</head>
<body>
<ul id="nav">
<li><A title="Home"
href="http://www.xyz.de/">HOME</A></li>
<li> <A title="Über uns" href="http://www.xyz.de/">ÜBER UNSERE KANZLEI</A>
<ul style="position: absolute; left: 28px; top: 15px; width:121px">
<li><A title="Über uns" href="http://www.xyz.de/">ÜBER UNS</A></li>
<li><A title="Leistungen" href="http://www.xyz.de/">LEISTUNGEN</A></li>
<li><A title="Partner" href="http://www.xyz.de/">PARTNER</A></li>
</ul>
</li>
<li> <A title="Links"
href="http://www.xyz.de/">LINKS</A></li>
<li> <A title="Kontakt & Anfahrt"
href="http://www.xyz.de/">KONTAKT/ANFAHRT</A></li>
</ul>
<table border="1" width="800" id="table1" style="border-width: 0px" cellspacing="1">
<tr>
<td background="links.gif" width="398" height="398" style="border-style: none; border-width: medium" colspan="4"> </td>
<td background="haupt.jpg" width="398" height="398" style="border-style: none; border-width: medium"> </td>
</tr>
<tr>
<td style="border-style: none; border-width: medium" colspan="4">
<font face="Verdana" size="1" color="#002E65">© </font></td>
<td style="border-style: none; border-width: medium">
<p align="right"><font face="Verdana" size="1" color="#002E65">Impressum</font></td>
</tr>
</table>
</body>
</html>
Gruß
Hasenbein
