Autor Zpráva
Rosty
Profil
Dobrý den,
snažím si udělat vertikální menu s drop down (hover) efektem na můj web, ale střetl jsem se s problémem u třetí "vrstvy".

Chci aby menu vypadalo takhle:

1. vrstva.Domu | Blabla
2. vrstva.Neco
2. vrstva.Neco dalsiho -- 3. vrstva.Jeste neco

Ale dopracoval jsem se jenom k druhé vrstvě. Třetí se mi buď překryje s textem na řádku níže, nebo se napasíruje mezi ně.

Kód:
<!DOCTYPE html>
<HTML>
  <HEAD>
<STYLE type="text/css">
BODY div#nav {
position: relative;
width: 1024px;
height: 54px;
margin: 0 auto 20px 0;
z-index: 20;
}

BODY div#nav UL {
position: absolute;
margin: 0;
padding: 0;
list-style: none;
}

BODY div#nav UL LI {
margin: 15px 15px 0px 15px;
display: inline;
float: left;
}

BODY div#nav UL LI UL
{
visibility: hidden;
border: 1px solid gray;
}

BODY div#nav UL LI:hover UL
{
visibility: visible;
}

BODY div#nav UL LI UL LI {
margin: 2px 10px 2px 10px;
display: block;
float: none;
}

</STYLE>
  </HEAD>
  <BODY>
<DIV id='nav'>
  <UL>
    <LI>
      Domu
      <UL>
        <LI>Me testa</LI>
        <LI>Me testa</LI>
        <LI>Me testaaaaaaaaaaaa</LI>
        <LI>Me testa</LI>
        <LI>Me testa</LI>
        <LI>Me testa</LI>
        <LI>Me testa</LI>
      </UL>
    </LI>
    <LI>|</LI>
    <LI>
      Novinky
      <UL>
        <LI>Me testa</LI>
        <LI>Me testa</LI>
        <LI>Me testa</LI>
        <LI>Me testa</LI>
        <LI>Me testa</LI>
      </UL>
    </LI>
    <LI>|</LI>
    <LI>
      Jak hrat
      <UL>
        <LI>Me testa</LI>
        <LI>
          Me testa
          <UL>
            <LI>Testime</LI>
          </UL>
        </LI>
        <LI>Me testa</LI>
      </UL>
    </LI> 
  </UL>
</DIV>
</BODY>
</HTML>
mking
Profil
spravil so mti to cez jQuery a css jednoduchšie a krajšie ;) menu.rar
panther
Profil
Rosty:
dodej odkaz na tve snazeni, 100 radku kodu se mi prochazet nechce.

mking:
a uzivatele nebo roboti vyhledavacu bez JS? Ti budou bez menu? Sikovne reseni (podotykam, ze rar jsem nestahoval, ale tahat do tohoto JS je naprosto zbytecne. O to vic cely framework).
Rosty
Profil
Odkaz: http://testingftw.4fan.cz/
panther
Profil
Rosty:
možností je více, můžeš udělat třeba něco na tento způsob:
#nav ul ul li {position: relative;}
#nav ul ul ul {position: absolute; top: 0; left: 100%;}
Rosty
Profil
Chtěl bych se zeptat na dvě věci:
1. Když použiju u druhé vrstvy visibility: hidden, proč u třetí musím použít display: none? Resp. proč taky nefunguje visibility?
2. Je správné používat margin se zápornými čísly? (např. margin: -20px 0 0 5px)
panther
Profil
Rosty:
1. Když použiju u druhé vrstvy visibility: hidden, proč u třetí musím použít display: none?
nemusíš. Napsal jsem jednu z alternativ, visiblity bude fungovat také.

2. Je správné používat margin se zápornými čísly? (např. margin: -20px 0 0 5px)
ano, jedná o regulérní zápis.

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: