nicht angemeldet
horizontales menü
Hallo zusammen,
Tag 4 meines ersten css-basierten Layouts habe ich mit der Erstellung eines horizontalen Menüs verbracht. Das ist dabei heausgekommen:
"<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<script type="text/javascript">
if(window.navigator.systemLanguage && !window.navigator.language) {
function hoverIE() {
var LI = document.getElementById("Navigation").firstChild;
do {
if (sucheUL(LI.firstChild)) {
LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
}
LI = LI.nextSibling;
}
while(LI);
}
function sucheUL(UL) {
do {
if(UL) UL = UL.nextSibling;
if(UL && UL.nodeName == "UL") return UL;
}
while(UL);
return false;
}
function einblenden() {
var UL = sucheUL(this.firstChild);
UL.style.display = "block"; UL.style.backgroundColor = "#E7E7DE";
}
function ausblenden() {
sucheUL(this.firstChild).style.display = "none";
}
window.onload=hoverIE;
}
</script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body, p {
font-family: verdana,helvetica,arial;
margin-left: 10%;
margin-top: 5%;
}
a {
text-decoration: none;
}
ul {
list-style-type: none;
}
ul#navigation {
width: 80%;
height: 2em;
background-color: #E7E7DE;
font-size: 0.8em;
font-weight: bold;
color: #7B1010;
padding-top: 7px;
padding-left: 10px;
}
ul#navigation div {
clear: left;
}
ul#navigation li {
float:left;
position:relative;
}
ul#navigation li ul {
position: absolute;
top: 2em;
left: -3px;
border-left: 1px solid #7B1010;
border-right: 1px solid #7B1010;
border-bottom: 1px solid #7B1010;
background-color: #E7E7DE;
display: none;
}
ul#navigation li:hover ul {
display: block;
}
ul#navigation li ul li {
float: none;
display: block;
border-top: 1px solid #FFFFFF;
padding: 1px;
}
ul#navigation li ul li a {
font-weight: normal;
color: #000000;
}
ul#navigation a {
color: #7B1010;
margin-left: 4px;
margin-right: 6px;
}
ul#navigation a:hover {
color: #DF0023;
}
</style>
</head>
<body>
<ul id="navigation">
<li><a href="#">OBERMENÜ1</a>|</li>
<li><a href="#">OBERMENÜ2</a>|
<ul>
<li><a href="#">Unterpunkt1</a></li>
<li><a href="#">Unterpunkt2</a></li>
<li><a href="#">Unterpunkt3</a></li>
<li><a href="#">Unterpunkt4</a></li>
<li><a href="#">Unterpunkt5</a></li>
<li><a href="#">Unterpunkt6</a></li>
</ul>
</li>
<li><a href="#">OBERMENÜ3</a>|
<ul>
<li><a href="#">Unterpunkt1</a></li>
<li><a href="#">Unterpunkt2</a></li>
</ul>
</li>
<li><a href="#">OBERMENÜ4</a>|
<ul>
<li><a href="#">Unterpunkt1</a></li>
<li><a href="#">Unterpunkt2</a></li>
<li><a href="#">Unterpunkt3</a></li>
<li><a href="#">Unterpunkt4</a></li>
</ul>
</li>
<li><a href="#">OBERMENÜ5</a>|</li>
<li><a href="#">OBERMENÜ6</a>
<ul>
<li><a href="#">Unterpunkt1</a></li>
<li><a href="#">Unterpunkt2</a></li>
</ul>
<div></div>
</li>
</ul>
</body>
</html>"
Ich persönlich hätte lieber eine andere Möglichkeit als dieses Aufklappen gefunden, aber es ist ausdrücklich so vorgegeben. Um dennoch in Möglichst vielen Browsern vernünftig damit arbeiten zu können, werde ich für die Obermenüpunkte "Verteilseiten" erstellen, von denen aus man zu den Unterpunkten gelangt.
Ich habe es jetzt soweit geschafft, daß die Menüs aufklappen (im IE mit Hilfe von Javascript). Nur wie schaffe ich es jetzt, daß die Menüs auch so stehenbleiben, daß ich damit navigieren kann? Also daß sie nicht nur sichtbar sind, solange ich mit der Maus über dem Link bin, sondern solange ich mit der Maus über dem Kästchen bin.
Ein weiteres Phänomen tritt im IE auf, wenn ich die Seite neu lade und das erste mal über einen Link fahre, ist der rote Rand um das Untermenü nich rundherum zu sehen. Wenn ich dann die Maus vom Link weg und erneut darauf bewege, ist er rundherum sichtbar. Kennt das jemand und weiß eine Lösung?
Es wäre nett, wenn sich jemand mal mein Beispielmenü anschaut, ich würde auch gerne wissen, ob ich überhaupt auf dem richtigen Weg bin, es ist wie gesagt mein erstes css-layout.
Gruß, alzani!
-
Ok, inzwischen habe ich gemerkt, daß mein Problem daran liegt, daß durch die Positionierung der unteren Liste ("top: 2em;") eine Lücke zwischen Obermenüpunkt und Liste entsteht. Diese Lücke möchte ich aber optisch schon haben, hat jemand einen Denkanstoss für mich?
Das problem beim IE finde ich auch nicht...
Gruß, alzani!