Vytvoření štítku stylů

Chcete-li, aby nabídka procházela samostatným HTML souborem, musíte učinit mezery mezi značkami a tam, kde bude kód CSS. Zadejte následující údaje do souboru.

Prostor mezi těmito dvěma štítky je váš stylový list. Pokud používáte samostatný soubor CSS, přidejte někde do značky "head":

Pak vytvořte soubor s názvem "style.css", který bude vaším stylem. Uložte list stylu ve stejném adresáři jako hlavní soubor HTML.

Vytvoření nabídky

Musíte vytvořit štítek, který obsahuje menu, aby se dostalo dovnitř. Přidejte následující informace do své stránky HTML v místě, kde chcete, aby nabídka proběhla:

Pak musíte definovat dělič menu. Přidejte následující kód do listu stylů:

menu {

šířka: 200px; }}

Přidejte do této položky jakýkoli jiný styl CSS, který chcete mít dělitel; například barvu pozadí, ohraničení nebo jinou velikost.

Značka HTML

Přidejte kód pro nabídku. V nabídce bude použit neřízený seznam:

, Přidejte následující kód mezi štítky v nabídce.
• Položka nabídky 1
  • Podmenu prvku 1
  • Podnabídka prvku 2

Poznámka: štítky

podnabídky jsou mezi štítky
• a
pro "Prvek 1 nabídky". To informuje prohlížeč, že pod touto položkou nabídky je podmenu. Upravte výše uvedený kód tak, aby reprezentoval vlastní nabídku, přidáním vlastních adres URL a dalších dílčích menu v případě potřeby

Styl CSS

V tomto okamžiku se zobrazí nabídka, ale vždy se zobrazí podmenu. Stačí pouze použít atribut "display" pro skrytí a odkrytí podnabídky. Přidejte do svého stylu listu následující:

menu li {pozice: relativní;}

menu ul ul {

poloha: absolutní; horní: 0; vlevo: 100%; šířka: 100px; } div # menu ul ul {display: none;} div # menu ul li: hover ul {zobrazení: blok;}

Uložte všechny soubory. Rozbalovací nabídka je připravena.

Odkazy

• Tanfa.co.uk: CSS Pop-Out Menu Tutorial (CSS rozbalovací menu tutoriál)

Více článků

• Jak vytvořit HTML horizontální rozbalovací menu
• Jak odstranit všechny styly CSS pro jednotlivé DIV
• Jak snížit mezeru mezi řádky v HTML
• Jak vložit dva obrázky horizontálně s HTML
• Jak přepsat CSS v rámci tříd DIV
• Jak zakotvit DIV v dolní části stránky
• Jak vytvořit vertikální řádek, který odděluje text HTML od obrázku