Navigationsliste überlappt sich

[bidu2004]

Hallo Forum,
da ich gerade an meinem ersten Webprojekt anfange, hab ich mal ein Nav-Leiste geschrieben.
Hier der Code:

body { cursor: crosshair; background-color: red; }
.menu { list style: none; }
.menu li { display: block; }
.menu li a {  
            width : 80px;
			color: black;
			background-color: #ccccff;
			text-align: center;
			text-decoration: none;
			font-size: 12px;
			border-top: 1px solid silver;
			border-right: 1px solid black;
			border-left: 1px solid silver;
			border-bottom: 1px solid black;
			padding-top: 2px;
			padding-right: 4px;
			padding-left: 4px;
			padding-bottom: 2px;
			margin-right: 2px;
			     }
.menu li a:hover { cursor: crosshair;
			width : 80px;
			background-color: #ffff99;
			text-align: center;
			text-decoration: none;
			font-size: 12px;
			border-top: 1px solid silver;
			border-right: 1px solid black;
			border-left: 1px solid silver;
			border-bottom: 1px solid black;
			padding-top: 2px;
			padding-right: 4px;
			padding-left: 4px;
			padding-bottom: 2px;
			    }
.menu li ul li a{ visibility : hidden; }
.menu li:hover ul li a{ cursor: crosshair; 
            width : 80px;
			color: black;
			background-color: #ccccff;
			text-align: center;
			text-decoration: none;
			font-size: 12px;
			border-top: 1px solid silver;
			border-right: 1px solid black;
			border-left: 1px solid silver;
			border-bottom: 1px solid black;
			padding-top: 2px;
			padding-right: 4px;
			padding-left: 4px;
			padding-bottom: 2px;
			margin-right: 2px;
			visibility: visible;
			z-index: 100;
			}
.menu li:hover ul li:hover a{ cursor: crosshair;
            width : 80px;
			background-color: #ffff99;
			text-align: center;
			text-decoration: none;
			font-size: 12px;
			border-top: 1px solid silver;
			border-right: 1px solid black;
			border-left: 1px solid silver;
			border-bottom: 1px solid black;
			padding-top: 2px;
			padding-right: 4px;
			padding-left: 4px;
			padding-bottom: 2px;
			              }

Der Webcode dazu:

<ul class="menu">
        <li><a href="#">Test</a>
		<ul>
		    <li><a href="#">Test</a></li>
			<li><a href="#">Test</a></li>
		</ul>
		</li>
	</ul>

Jetzt die Frage: weshalb überlappen sich diese Elemente, und weshalb kommen die beiden unteren li-Elemente schon dann zum Vorschein, wenn ich nicht über das obere li-Element fahre sonder wenn ich schon über die unsichtbaren Elemente fahre.
lg bidu2004

 

[Efchen]

Gibts das auch als Link? Code lesen macht müde.

 

[bidu2004]

Nee

Nee es gibt keinen Link, da ich erst angefangen habe das Projekt lokal zu programmieren. Allerdings kann ich die Website posten.

 

[Efchen]

Nö, das hilft mir auch nicht. Da muss ich ein unbekanntes Archiv runterladen, das irgendwo speichern...das ist mir zu kompliziert. Das ist Arbeit, die Du Dir machen sollst :-) Immerhin hast Du eine Frage.

 

[bidu2004]

Was soll ich denn noch machen? In dem Verzeichnis is ne .html-Datei

 

[stachelbeer]

.menu li:hover [COLOR="Red"]>[/COLOR] ul li a{ cursor: crosshair; 
            width : 80px;
			color: black;
			background-color: #ccccff;
			text-align: center;
			text-decoration: none;
			font-size: 12px;
			border-top: 1px solid silver;
			border-right: 1px solid black;
			border-left: 1px solid silver;
			border-bottom: 1px solid black;
			padding-top: 2px;
			padding-right: 4px;
			padding-left: 4px;
			padding-bottom: 2px;
			margin-right: 2px;
			visibility: visible;
			z-index: 100;
			}

Dass alle Aufgehen liegt am Fehlenden größer Zeichen (rot)

Außerdem hast Du nur die Sichtbarkeit das a-Elements abgeschalten und nicht die Tiefergelegende List in der Darstellung abgeschalten d.h.

.menu li ul {
  display:none;
}

fehlt.

dementsprechend muss es auch mit

.menu li:hover >  ul {
  display:block;
}

wieder dargestellt werden.

Die Positionierung habe ich mir jetzt noch nicht angeschaut.

 

[Efchen]

Was soll ich denn noch machen?

Am schönsten ist immer ein Link zur Seite. Es gibt ja genug Möglichkeiten, diese irgendwo hochzuladen.
Die Alternative ist warten, bis sich jemand die Mühe gemacht hat ;-)

 

[bidu2004]

Vielen Dank, das hat das Problem gelöst. Ich habe den Code noch selbst ein bisschen verändert und jetzt kommt ein anderes Problem:
ich habe der verschachtelten ul

display:inline; float:right;

eingefügt, und jetzt werden die verschachtelten li's ganz rechts angezeigt. Kann mir da jemand helfen?

 

[Efchen]

display:inline und float schließen sich aus.
float schließt display:block ein.

Es macht auch keinen Sinn, beides anzugeben. Was bezweckst Du damit?

 

[bidu2004]

Ich habs falsch geschrieben.
es ist float:right

 

[Efchen]

float und display:inline schließen sich trotzdem aus. Meine Frage bleibt bestehen, was bezweckst Du damit?

 

[bidu2004]

eigentlich nicht viel...
was soll ich denn sonst für ne display eigenschsft angeben? ich muss eine angeben, da es sonst unsichtbar bleibt...

 

[Efchen]

float setzt automatisch display:block.
Da muss wohl noch irgendwo einen anderen Fehler geben.

Gibts inzwischen einen Link?

Gehts hier ums ein- und ausblenden eines Menüs? Wo Du dem Element zunächst "display:none" zuweist? Und es dann sichtbar machen willst? Dann brauchst Du natürlich display:block.

 

[bidu2004]

das würde das problem ev. lösen, da es so eine Ausklappbare Leiste ist. kurze frage: wie kann ich machen das das ganze auch unter opera, ie geht?

 

[stachelbeer]

poste mal die aktuelle Arbeitsgrundlage

 

[Efchen]

Normalerweise genauso.
Ältere IEs können kein :hover auf anderen Elementen außer <a>. Da muss dann eine JavaScript-Alternative her. Allerdings muss das Menü dann natürlich auch bei abgeschaltetem JavaScript weiterhin nutzbar bleiben.