Diskuze: Překrývací vysouvací menu

Naučíme tě pracovat na home-office.

Zjistit více...

Aktivity

KiRoS

Člen

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.

Honza Bittner

Tvůrce

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.

KiRoS

Člen

KiRoS:9.6.2014 15:53

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

Nahoru Odpovědět

9.6.2014 15:53

Programování a informační technologie má budoucnost.

Honza Bittner

Tvůrce

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.