Válí se ti projekty v šuplíku? Dostaň je mezi lidi a získej cool tričko a body na profi IT kurzy v soutěži ITnetwork summer 2017!
Přidej si svou IT školu do profilu a najdi spolužáky zde na síti :)

Diskuze: Překrývací vysouvací menu

HTML a CSS HTML a CSS Překrývací vysouvací menu American English version English version

Aktivity (1)
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
Redaktor
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
Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a zeptat na cokoli se mě můžeš na https://github.com/HoBi/...
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
Redaktor
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
Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a zeptat na cokoli se mě můžeš na https://github.com/HoBi/...
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.