Diskuze: dropdown menu - jak postupovat

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

Zjistit více...

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

Aktivity

Kamil

Člen

Kamil:9.11.2022 11:17

Ahoj,
jak dokážu ukrýt položku example?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap" rel="stylesheet">
    <style>
      nav ul li a > *{
           display: none;
       }
    </style>
    <title>Document</title>
</head>
<body>
    <div class="wrapper">
        <div class="menu">
            <h1>Simple navigation menu</h1>
            <nav>
                <ul>
                    <li><a href="#" title="Home">Home</a>
                        <ul>
                            <li><a href="" title="Pokus">Example</a></li>
                        </ul>

                    </li>
                    <li><a href="#" title="Services" class="actual">Services</a></li>
                    <li><a href="#" title="About">About</a></li>
                    <li><a href="#" title="Blog">Blog</a></li>
                    <li><a href="#" title="Contact">Contact</a></li>
                </ul>
            </nav>
        </div>
    </div>
</body>
</html>

Zkusil jsem: Zkoušel jsem přes položku skrýt

nav ul li a > *{
         display: none;
     }

Chci docílit: Chci udělat dropdown menu

Odpovědět

9.11.2022 11:17

Peter Mlich

Člen

Peter Mlich:9.11.2022 14:41

???

struktura css: nav ul li a > *
struktura html: <body> <div> <div> <h1> <nav> <ul> <li> <ul><li><a href="" title="Pokus">Example</a></li></ul>
struktura html2: <nav> <ul> <li> <ul><li><a href="" title="Pokus">Example</a></li></ul>

Neprislo ti ani trochu divne, ze druhy UL je zarazeny pod LI a ty se jej snaziz zakry pres A tag, ktery nad nim neni zadny? Ale, mozna tu vetu nepochopis, tak zkusim jeste html schema, strom tagu, nakreslit...
Jakoze takto, struktura, v jake mas html tagy neodpovida tvemu css, poradi tagu ve strome. Cili, ten zapis nic nedela, protoze pod A nemas zadny tag, kdtery by slo nastavit na display:none

nav
   |--ul
        |--li
        |   |-- a href="#" title="Home">Home TEN UL BY MUSEL BYT TADY</a>
        |   |-- ul
        |        |---li
        |             |--- a href="" title="Pokus">Example</a>
        |
        |         </ul>
        |      </li>
        |---li
             |--- a href="#" title="Services" class="actual">Services</a></li>

Cili, pokud to chces schovat, tak treba

nav ul li ul /*nebo*/
nav ul ul

Pripadne si zkus vygooglovat hotovi kod pro dropdown menu (to najdes 100.000 prikladu, neni mozne, aby se ti nejaky nezamlouval). Vypada to, ze si s tim asi neporadis.

Editováno 9.11.2022 14:43

Akceptované řešení
+20 Zkušeností
+2,50 Kč

Nahoru Odpovědět

9.11.2022 14:41

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 2 zpráv z 2.

Nejčastěji vyhledáváné

Diskuze: dropdown menu - jak postupovat