snažím se vytvořit složitější vertikální menu viz. toto:
Kód: Vybrat vše
<ul>
<li class="viceurovnova">Nadpis
<ul>
<li class="rozbalovaci"><a>Najeď myší1</a>
<ul">
<li><a href="#">Rozbalovací položka1</a></li>
<li><a href="#">Rozbalovací položka2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
Celé menu by mělo vypadat takto: http://s9.postimg.org/yc50hup5r/menu.png. Problémem asi budou třídy, které se míchají:
Kód: Vybrat vše
/* Navigace */
.viceurovnova ul{margin: 0;padding: 0;list-style-type: none; list-style-type:none}
.viceurovnova a{display: block;color: #FFF;background-color: #036;width: 9em;padding: 3px 12px 3px 8px;text-decoration: none;border-bottom: 1px solid #fff;font-weight: bold;}
.viceurovnova a:hover{background-color: #369;color: #FFF;}
/*Navigace2*/
.rozbalovaci ul{margin: 0px; padding: 0px;}
.rozbalovaci{clear:both;width: 100%;}
.rozbalovaci li {list-style-type:none;position:relative;width: 100%;}
.rozbalovaci li a {display:block; padding: 0 3px;}
.rozbalovaci li a:hover { background: yellow; color:black;}
.rozbalovaci li ul{position:absolute;top:0;left:100px;visibility:hidden;}
.rozbalovaci li:hover ul{visibility:visible;display:block;position:absolute;border: solid black; border-width:0 1px 1px 1px;}
.rozbalovaci li:hover ul li { display:block;position:relative; float:none; height:24px; width: 110px; border-top: 1px solid #F0F0F0;}
.rozbalovaci li:hover ul li a {background:black; color: white;}
.rozbalovaci li:hover ul li a:hover {background: rgb(227,142,51); color:#fff; font-weight: bold;}Neví někdo, v čem dělám chybu? Děkuji
