• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Navi-Leiste mit Unterktegorien

Status
Für weitere Antworten geschlossen.

LillyStern

Neues Mitglied
Schönen Tag zusammen,
folgendes Problem:
Ich habe für einen Shop eine Navileiste mit html und eingebundenem css erstellt. Habe mir in einem Ein-Tag-Crash-Kurs selbst beigebracht, besitze also im Moment noch keine weiterführenden Kenntnisse...

Nun brauche ich aber auch Unterkategorien, wenn ich einen Punkt in der Navileiste anklicke, sollte sich ein Untermenü mit weiterführenden Links öffnen, z.B. "Bekleidung">>>>"Blusen">>>"Hosen">>>"Westen"...u. s.w..

Ich würde gerne das erstellte Menü soweit beibehalten. Gibt es einen Code den ich in unten aufgeführten irgendwie einbauen kann? Vielen lieben Dank im voraus.

Gruss
LillyStern

PS: Die Links sind ein bisschen lang, aber ist halt auf dem Webspace so.
-------------------------------------------------------------------

Der Quellcode lautet:

Code:
<html>
<head>
<style type="text/css">
 
#navi {width:240px; text-align:right; margin-top:5px; margin-botom:5px; margin-left:5px; margin-right:5px;}
 
#navi ul {list-style:none;}
 
#navi li {background-color:#FFCCFF; border-top:5px #C71585 double; border-left:5px #C71585 double; border-bottom:5px #C71585 double; border-right:5px #C71585  double; margin-top:6px; padding-top:8px; padding-bottom:8px; padding-left:4px; padding-right:8px;
 
</style>
</head>
 
<body>
 
<div id="navi"> 
 
<ul> 
<li><img src="[URL]http://freenet-homepage.de/Tulpendiebin.freenet.de/Ebay/girl-1-48x48.png[/URL]" align="left" width="40" height="40">
<a href="http://stores.ebay.de/Cloth-n-Roses_Damen-Bekleidung_W0QQcolZ2QQdirZ1QQfsubZ10638676QQftidZ2QQtZkm">Damen-Bekleidung</a></li>
 
<li><img src="[URL]http://freenet-homepage.de/Tulpendiebin.freenet.de/Ebay/boy-3-48x48.png[/URL]" align="left" width="40" height="40">
<a href="
http://stores.ebay.de/Cloth-n-Roses_Herren-Bekleidung_W0QQcolZ2QQdirZ1QQfsubZ10638677QQftidZ2QQtZkm">Herren-Bekleidung</a></li>
 
<li><img src="[URL]http://links.pictures.aol.com/pic?id=21c0CxsmUBlXzM1FlvKDytNiEOyHseJkgjxM&size=l[/URL]" align="left" margin-left="2">
<a href="
http://stores.ebay.de/cloth-n-roses_Accessoires_W0QQcolZ2QQdirZ1QQfsubZ10400973QQftidZ2QQtZkm">Accessoires</a></li>
 
<li><img src="[URL]http://links.pictures.aol.com/pic?id=21c0CxsmUBlXzM1FlvKDytNiEPP3D4kVSxdo&size=l[/URL]" align="left">
<a href="http://stores.ebay.de/Cloth-n-Roses_Schmuck_W0QQcolZ2QQdirZ1QQfsubZ10541551QQftidZ2QQtZkm">Schmuck</a></li>
 
<li><img src="[URL]http://links.pictures.aol.com/pic?id=21c0CxsmUBlXzM1FlvKDytNiEG9BUALtkpOc&size=l[/URL]" align="left">
<a href="http://stores.ebay.de/Cloth-n-Roses_Kids_W0QQcolZ2QQdirZ1QQfsubZ10400974QQftidZ2QQtZkm">Kids</a></li>
 
<li><img src="
[URL]http://links.pictures.aol.com/pic?id=21c0CxsmUBlXzM1FlvKDytNiELvsHMF*rBxo&size=l[/URL]" align="left">
<a href="http://stores.ebay.de/Cloth-n-Roses_Bucher_W0QQcolZ2QQdirZ1QQfsubZ10400975QQftidZ2QQtZkm">Buecher</a></li>
 
<li><img src="[URL]http://links.pictures.aol.com/pic?id=21c0CxsmUBlXzM1FlvKDytNiECZx8gXzUwbb&size=l[/URL]" width="40" height="40" align="left">
<a href="http://stores.ebay.de/Cloth-n-Roses_Elektronik_W0QQcolZ2QQdirZ1QQfsubZ10400976QQftidZ2QQtZkm">Elektronik</a></li>
 
<li><img src="[URL]http://links.pictures.aol.com/pic?[/URL]
id=21c0CxsmUBlXzM1FlvKDytNiEBR9hkVYqAQN&size=l" align="left">
<a href="http://stores.ebay.de/Cloth-n-Roses_Deko_W0QQcolZ2QQdirZ1QQfsubZ10492882QQftidZ2QQtZkm">Deko</a></li>
 
<li><img src="[URL]http://links.pictures.aol.com/pic?id=21c0CxsmUBlXzM1FlvKDytNiEOAaupVC5mUR&size=l[/URL]" align="left">
<a href="
http://stores.ebay.de/Cloth-n-Roses_Haushalt_W0QQcolZ2QQdirZ1QQfsubZ10492883QQftidZ2QQtZkm">Haushalt</a></li>
 
<li><img src="[URL]http://links.pictures.aol.com/pic?[/URL]
id=21c0CxsmUBlXzM1FlvKDytNiEDrLYdfVOhmh&size=l" align="left">
<a href="
http://stores.ebay.de/Cloth-n-Roses_Saisonales-Ostern_W0QQcolZ2QQdirZ1QQfsubZ10628038QQftidZ2QQtZkm">Ostern</a></li>
 
<li><img src="[URL]http://links.pictures.aol.com/pic?id=21c0CxsmUBlXzM1FlvKDytNiEChXOyP*OU*g&size=l[/URL]" align="left">
<a href="<A href="http://stores.ebay.de/Cloth-n-Roses_Sonstige_W0QQcolZ2QQdirZ1QQfsubZ1QQftidZ2QQtZkm">Sonstiges</a></li></ul></div>
 
</body>
</html>

Oh, sorry. Habe nicht gesehen, dass das Thema hier schon angeschlagen wurde:oops: .

Ich schaue mir mal die Vorschläge an, die unter dem entsprech. Thread stehen und melde mich wieder, wenn ich Fragen habe.

Gruss
LillyStern
 
also fürs hovern hätte ich was:

Code:
li ul {display: none;} 
li:hover > ul {display: block;}

Nils aka XraYSoLo
 
Bin noch da :D Danke. Werde das offline mal ausprobieren, und mir auch mal die anderen Seiten im anderen Thread ansehen...

Gruss
LillyStern
 
Status
Für weitere Antworten geschlossen.
Zurück
Oben