Prosím o pomoc s tvorbou menu

Webdesign, HTML, CSS, Flash, PHP, ASP, .NET, JavaScript. Kritika www stránek na Smetišti.

Moderátor: Moderátoři Živě.cz

Odeslat příspěvekod K8 30. 11. 2020 21:44

Na stránce http://pokusy.kreteni.eu/menu/menu.html mám pokusné menu, které se mi vysouvá, ale to vysunuté menu je překryté tím základním menu.
html
Kód: Vybrat vše
      <td>
        <div id="navcontainer1">
          <ul id="navlist1">
            <li class="uroven1">První
              <ul class="uroven2">
                <li class="uroven2">qwert</li>
                <li class="uroven2">asdfg</li>
                <li class="uroven2">yxcvb</li>
                <li class="uroven2">poiuz</li>
                <li class="uroven2">lkjhg</li>
                <li class="uroven2">mnbvc</li>
              </ul>
            </li>
          </ul>
        </div>
      </td>

css
Kód: Vybrat vše
td {
    z-index: 1;
}
ul, li {
   list-style: none;
   border: 0px none;
   margin: 0px;
   padding: 0px;
}
li {
    text-align: left;
   background-color: #ffffff;
}
#navcontainer1 {
   margin: 0px;
   padding: 0px;
    z-index: 1;
}
li.uroven1 {
   position: relative;
   padding-top: 10px;
    z-index: 1;
}
ul li.uroven1 ul {
   background-color: #ffffff;
   position: absolute;
   left: 25px;
   top: 0px;
   visibility: hidden;
}

ul li.uroven1:hover ul {
   visibility: visible;
    border: 1px solid #0000ff;
}
li.uroven2 {
   padding-left: 4px;
   padding-right: 4px;
   padding-top: 2px;
   padding-bottom: 2px;
   float: left;
    z-index: 200;
}

poradí mi někdo, jak to umravnit, aby to vysunuté menu bylo vždy navrchu. Předem děkuji,
K8
Pokročilý

Odeslat příspěvekod Emil Pastelka 1. 12. 2020 00:53

Máte to zbytečně složitě. Zásadní chyba je v použití stejného ID vícekrát. Na to slouží třída (class), kterou také používáte divoce. Proč to máte v tabulce je sice k diskuzi, ale to na funkci nemá vliv.

Živý příklad zde.
Emil Pastelka
Junior
Uživatelský avatar

Odeslat příspěvekod K8 1. 12. 2020 14:22

Díky moc za příklad, už mi to podle něj funguje.

-- 1. 12. 2020 14:42 --

Jen mám ještě jeden problém, potřeboval bych, aby se šířka toho rozbalovacího menu přizpůsobila obsahu, teď to má nějakou pevnou šířku a já jí nikde v css nevidím a text se mi tam zalamuje.
K8
Pokročilý

Odeslat příspěvekod Emil Pastelka 1. 12. 2020 15:45

Upravil jsem příklad, nicméně je to jen doplnění do selektoru ul.navcontainer > li
Kód: Vybrat vše
white-space: nowrap;
Emil Pastelka
Junior
Uživatelský avatar


Kdo je online

Uživatelé procházející toto fórum: Žádní registrovaní uživatelé a 0 návštevníků