Menü probleme

[darkminde]

Hi ich nochmal irgenwie stelle ich mich heute einfach zu blöde an kann mir vll einer helfen?
Habe ein menü mit css erstellt.
Home / About / Portfolio / Login
wenn ich nun auf Portfolio gehe Klappt es nach unten auf soweit ganz gut
Equipment
Photoshoots
nun soll wenn ich bei Photoshoots bin es nach rechts und dann nach unten auklappen für die Jahre.
..
Portfolio / 2015 / Januar
Februar
..

Aber irgenwie klapt das nicht siehe Quelltext:

<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="shoot.html">About</a></li>
<li>Portfolio
<ul>
<li><a href="shoot.html">Equipment</a></li>
<li>Photoshoots
<ul>
<li>2015
<ul>
<li>Januar</li>
<li>Februar</li>
</li>
</ul>
</li>
</ul>
</li>
<li>Login</li>
</ul>
</nav>

Danke schonmal im vorraus.

Dark

 

[dn3d_fanboy]

Da müsste man mal den CSS-Code sehen.

 

[darkminde]

@charset "utf-8";
/* CSS Document */

body { background: #222; font-family:Helvetica, sans-serif}

nav {position:absolute; top:100px; left:200px; }

nav ul {margin:0; padding:0; height:36px; box-shadow:0px 0px 32px 0px #111; border-radius:10px; width:auto;}
nav ul li { position:relative; border-right:1px solid#222; list-style:none; float:left; background:#333; padding:10px; width:70px; text-align:center; transition:all 500ms; color:#999}
nav ul li:first-child { border-radius:10px 0px 0px 10px}
nav ul li:last-child {border-radius:0px 10px 10px 0px; border:none}
nav ul li:hover {background:#0C0; color:#FFF}

nav ul li:hover ul { height:auto; opacity:1;}
nav ul li ul {height:0; overflow:hidden; opacity:0; position: absolute; top:40; left:0px}
nav ul li ul li { width:130px;}
nav ul li ul li:first-child { border-radius:10px 10px 0px 0px}
nav ul li ul li:last-child {border-radius:0px 0px 10px 10px; border:none}

nav ul li a {
color: #999;
text-decoration: none;
}

list-style: none;

 

[dn3d_fanboy]

Ich sehe gerade, dass du bei der vierten Ebene im HTML-Code die <ul>-Liste nicht korrekt schließt. Und ob das alles mit dem CSS-Code geht, kann ich auch nicht sagen, da der nur bis zur zweiten Ebene geht.

Was genau funktioniert denn nicht?

 

[darkminde]

ab der zweiten ebene wo das menü nach rechts ausklappen soll beo Photoshoots er baut dann immer nur nach unten (unter portfolio und nicht nach rechts)

 

[dn3d_fanboy]

Na ja, da brauchst du dann eben den CSS-Code der dritten und vierten Ebene. Im Moment nimmt er den des Elternelements, also der Zweiten.

 

[darkminde]

kannst mir vll dabei helfen bei css bin ich nicht so fit habe da erst angefangen

 

[patrick_l]

kannst mir vll dabei helfen bei css bin ich nicht so fit habe da erst angefangen

Vorweg, wir sind kein "mach mir mal" Forum. Hier bekommt jeder Hilfe zur Selbsthilfe. Wenn nötiges Grundlagenwissen fehlt, solltest du dir selbiges mit Hilfe von passender Fachlektüre und/oder passenden Tutorials aneignen. Hier auf PSD-Tutorials findest du einiges zu diesem Thema. Wenn es mehr sein darf, auch mal im Shop vorbeischauen.

Auch im Internet findest du haufenweise Anleitungen, Snippets und der Gleichen. Sowohl reine CSS(3) Multi-Level Navigationen als auch mit JavaScript (jQuery). Also einfach mal explizit danach suchen und dann Schritt für Schritt an deine Website anpassen. Auf schnelle auch ein Link von mir:

- 38 OpenSource CSS Dropdown Menüs

Was jetzt dein CSS angeht, solltest du auch mehr Ordnung rein bringen. Arbeite unter anderem mit Klassen, um einzelne Elemente schneller selektieren zu können.

Liebe Grüße, Patrick

 

[darkminde]

Hi patrick ich will ja nicht hier machmal und präsentiere mir das ergebniss ich will es ja lehrnen deshalb habe ich ja gefragt ob er mir helfen könte und nicht codet.

Hab auch schon gegooglet aber leider nicht das passende gefunden.

ich bedanke mich für den Link und werde es mal durcharbeiten.

danke an alle

 

[hub]

Moin,
um weiter zu experimentieren solltest du die zeile mit overflow mal auskommentieren

nav ul li ul {
    height:0; 
   /*  overflow:hidden;  /* <-------------*/
    opacity:0;
    position: absolute;
    top:40;
    left:0px
}

und dann dafür sorgen, das ab der 3. Ebene ul mit top: 0 und left: 100% positioniert werden ...

Gruß Ulli

 

[darkminde]

alles klar werde ich mal ausprobieren