NOVINKA: Získej 40 hodin praktických dovedností s AI – ZDARMA ke každému akreditovanému kurzu!
S účinností od 26. 3. jsme aktualizovali Zásady zpracování osobních údajů – doplnili jsme informace o monitorování telefonických hovorů se zájemci o studium. Ostatní části zůstávají beze změn.

Diskuze: Překrývací vysouvací menu

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Jak se ti líbí článek?
Před uložením hodnocení, popiš prosím autorovi, co je špatněZnaků 0 z 50-500
Jak se ti kurz líbí?
Tvé hodnocení kurzuZnaků 0 z 50-500
Aktivity
Avatar
KiRoS
Člen
Avatar
KiRoS:9.6.2014 14:34

Ahoj mám vysouvací menu ale vše funguje ok. Akorát to vysune pod jiný blok. Zkoušel jsem z-index ale to mi nefunguje. Nevíte někdo co s tim ??

Zde je html

<div class="menu-blok">
<div class="hlavni-m">
<nav>
    <ul class="sf-menu">

<li><a href="?s=dum">DŮM</a>
 <ul>
          <li><a href="#">Zkouška </a></li>
          <li><a href="#">Zkouška </a></li>
          <li><a href="#">Zkouška </a></li>
          <li><a href="#">Zkouška </a></li>
          <li><a href="#">Zkouška </a></li>
        </ul> </li>
<li><a href="?s=zahrada">ZAHRADA</a></li>
<li><a href="?s=zvirata">PRO ZVÍŘATA</a></li>
<li><a href="?s=roubenky">ROUBENKY</a></li>
<li><a href="?s=obaly">OBALY</a></li>
<li><a href="?s=ostatní">OSTATNÍ</a></li>
<li><a href="?s=onas">O NÁS</a></li>
</ul>
</nav>
</div>
</div>

Zde je CSS

div.menu-blok
{
  width: 100%;
  height: 50px;
  position: relative;
  border-top:3px solid #8b4513;
  border-bottom:3px solid #8b4513;
  background-color: #341003;
    opacity: 0.60;
  filter:alpha(opacity=50); /* For IE8 and earlier */
}

.hlavni-m
{
  width: 1000px;
  position: relative;
  margin: 0 auto;
}

nav ul
{
  margin: 0px;
  list-style-type: none;
  padding: 0;
  color: white;
  display: block;

   z-index: auto;
}

nav ul li
{
  float: left;
  color: white;
  font-weight: bold;
  font-size: 25px;
  padding: 7px;
  margin-right: 15px;
  display: block;
   z-index: auto;
}

nav ul li:hover, .aktivni
{
  float: left;
  background: #7A421A;
  padding: 0;
  color: white;
  height: 36px;
  margin-right: 15px;
  padding: 7px;
  display: block;
   z-index: auto;
}

ul.sf-menu ul {
  position: absolute;
  left: 0;
  width: 350px;
  top: auto;
  left: -999999px;
  display: block;
  background: black;
   z-index: auto;
  }

ul.sf-menu ul a {
  zoom: 1;
  display: block;
   z-index: auto; }

ul.sf-menu ul li {
  float: left;
  width: 150px;
  display: block;
   z-index: auto; }

ul.sf-menu ul ul {
  top: 0;
  margin: 0 0 0 150px;
  display: block;
   z-index: auto;}
Odpovědět
9.6.2014 14:34
Programování a informační technologie má budoucnost.
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na KiRoS
Honza Bittner:9.6.2014 14:38

IMHO Aby ti fungoval z-index tak musíš nastavit nějakou pozici, třeba na relative. Zkus tak nastavit ten box pod menu. ;)

Nahoru Odpovědět
9.6.2014 14:38
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
KiRoS
Člen
Avatar
Odpovídá na Honza Bittner
KiRoS:9.6.2014 15:53

Omlouvám se ale který blok přesně myslíš :D

Nahoru Odpovědět
9.6.2014 15:53
Programování a informační technologie má budoucnost.
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na KiRoS
Honza Bittner:9.6.2014 15:58

Ten co ti překrývá menu, tedy nějaký main, #content, section nebo něco podobného... :)

Nahoru Odpovědět
9.6.2014 15:58
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 4 zpráv z 4.