Autor Zpráva
Milanek
Profil *
Ahoj všichni,
mohl by mi někdo pomoct s tímhle? Chci udělat vertikální víceúrovňové menu, ale pořád mi to dělá jen jednoúrovňové (resp. ukážou se mi naráz všechny úrovně).

Dělal jsem to přesně podle téhle stránky:
http://translate.google.cz/translate?hl=cs&sl=en&tl=cs&u=http%3A%2F%2Fcss.flepstudio.org%2Fen%2Fcss-tutorials%2Fhow-to-create-a-basic-vertical-css-dropdown-menu.html&anno=2

To se mi udělalo správně (byť jen v Mozille, v IE to nefunguje, což je další problém). Teď bych ale potřeboval, aby se mi i to podmenu rozbalilo dál. Když to zkouším naprogramovat, tak se mi všechny úrovně ukážou okamžitě po najetí myši na to hlavní menu (1. úrovně). Ale já bych se na ty nejnižší úrovně (Line 1-1-1, Line 1-1-2, Line 1-1-3) chtěl dostat postupně po najetí myši na položku v podmenu (Line 1-1). Nějak mi to nejde naprogramovat v CSS. Mám asi nějak špatně naprogramované třídy a jejich vnořování.

Mám to takhle:
<head>
<style>
#Menu, #menu ul, #menu li {padding: 0;
margin: 0;
}

#menu li {list-style: none;
position: relative;
width:120px;
height: 30px;
padding:0 20px;
background-color: black;
line-height: 30px;
cursor:pointer;
}

#menu li a {text-decoration:none;
color: white;
}

#menu li:hover {background-color:red;
}

#menu ul ul {position: absolute;
top:0;
left:160px;
visibility:hidden;
}

#menu ul li:hover ul {visibility:visible;
}
</style>
</head>

<body>
<div id="menu">
<ul>
<li> <a href="#nogo"> Link 1 >> </a>
<ul>
<li> <a href="#nogo"> Link 1-1 >> </a>
<ul>
<li> <a href="#nogo"> Link 1-1-1 </a> </li>
<li> <a href="#nogo"> Link 1-1-2 </a> </li>
<li> <a href="#nogo"> Link 1-1-3 </a> </li>
</ul>
</li>
<li> <a href="#nogo"> Link 1-2 </a> </li>
</ul>
</li>
<li> <a href="#nogo"> Link 2 >> </a>
<ul>
<li> <a href="#nogo"> Link 2-1 </a> </li>
<li> <a href="#nogo"> Link 2-2 </a> </li>
<li> <a href="#nogo"> Link 2-3 </a> </li>
</ul>
</li>
<li> <a href="#nogo"> Link 3 </a> </li>
<li> <a href="#nogo"> Link 4 >> </a>
<ul>
<li> <a href="#nogo"> Link 4-1 </a> </li>
<li> <a href="#nogo"> Link 4-2 </a> </li>
<li> <a href="#nogo"> Link 4-3 </a> </li>
</ul>
</li>
</ul>
</div>
</body>


Teď tam asi musím dát nějakou další třídu #menu ul ul ul nebo podobně, ale nevím přesně jak. Nikde jsem nenašel programový kód na 3. úroveň, 4. úroveň.... Vždy jen na hlavní menu s jedním podmenu.

Díky za pomoc.
panther
Profil
Milanek:
dodej odkaz, kde je k vidění problém. Tzn. na tvůj web, ne na nějaký, kde to (asi) funguje. Pokud to nefunguje ani na tebou odkázaném řešení, hledej jiné.
Milanek
Profil *
panther, panther:
Uz jsem to vyresil.
Rellik
Profil
Můžeš se pro příště nechat inspirovat třeba tu: http://qrayg.com/experiment/cssmenus/ ;)

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: