Problém s rozbalovacím vertikálním menu

drawknife · Příspěvek od **drawknife** » 28 dub 2013 09:59

Dobrý den,
snažím se vytvořit složitější vertikální menu viz. toto:

<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

CrazyC0de · Příspěvek od **CrazyC0de** » 28 dub 2013 16:24

Nechce se mi hrabat v kodu, každopádně místo .rozbalovaci li, dej li.rozbalovaci, pokud by to mělo být tak jak to máš ty, tak HTML by vypadalo takhle :

Kód: Vybrat vše

<div class="rozbalovaci">
<li>dsf</li>
</div>

Tady jsem ti udělal provizorní kravinu z které už si to uděláš :

Kód: Vybrat vše

<style>
ul li ul li{display: none;width: 100px;height: 20px;margin-top: 5px;background: black;color: red;}
ul li:hover ul li{display: block;}
  </style>
  </head>
  <body>
<ul>
<li>Rozbal
<ul>
<li>1.Polozka</li>
<li>2.Polozka</li>
</ul>
</li>
</ul>

CZechBoY · Příspěvek od **CZechBoY** » 28 dub 2013 17:47

případně použít generátor a insipirovat se kodem :)
http://purecssmenu.com/

PC-HELP.CZ

CNEWS

Problém s rozbalovacím vertikálním menu

Problém s rozbalovacím vertikálním menu

Re: Problém s rozbalovacím vertikálním menu

Re: Problém s rozbalovacím vertikálním menu