Levé menu s rozbalovací položkou

V tomto návodu se naučíte jak vytvořit pomocí HTML a CSS levé menu s jednou rozbalovací položkou. Příklad využívá poze HTML a CSS a jednoduchou formou ukazuje možnost použití psoudotřídy :hover. V příkladu je vidět použití vnořených seznamů, jejich pojmenování a použití stylů – skrytí a zobrazení prvku.

Otevřete libovolný editor pro psaní HTML kódu.

Do editoru napište, nebo zkopírujte kód uvedený níže.

Zdrojový kód:

<!DOCTYPE html>

<head>
<meta content=“text/html; charset=utf-8″ http-equiv=“Content-Type“ />
<title>položka 1</title>

<style>
.child {display:none;}

#parent:hover .child {display: block;}

ul {display: inline-block;}

</style>

</head>

<body>

<ul>
<li > položka 1</li>
<li id=“parent“> <a href=““>položka 2</a>

<ul class=“child“>
<li> položka 1</li>
<li> položka 2</li>
<a href=““>položka 3</a>

<li> položka 4</li>
</ul>
</li>

<li> položka 3</li>
<li> položka 4</li>
</ul>

</body>

</html>

Výsledný efekt:
položka 1

Pokud se o instalaci WordPressu chcete dozvědět více, navštivte některý z našich kurzů.