Menu v CSS pomocí hover a seznamu ul li

Potřebujete na své stránky vodorovné menu a nechce se Vám vytvářet vlastní? Vytvořil jsem pro vás zdarma šablonu na jednoduché menu s hover efektem za pomoci UL seznamu. Zdrojový kód je dobře okomentovaný, takže určitě poznáte, co k čemu slouží 🙂

HTML:

<div id="obal">   <div id="menu">     <h2>Navigace:</h2>     <ul>       <li class="prvni"><a href="prodej.html">Prodej</a></li>       <li><a href="sluzby.html">Služby</a></li>       <li><a href="cenik.html">Ceník</a></li>       <li><a href="onas.html">O nás</a></li>       <li class="spodni"><a href="kontakt.html">Kontakt</a></li>     </ul>   </div> </div>  

CSS: 

#obal {     background: orange;     width: 499px;     height: 38px;     font-family: "Century Gothic", sans-serif; } #menu ul {   width: 700px;   float: left; /* zajišťuje roztažení pozadí za položky nabídky */   margin: 0;   padding: 3px 0;       /* mezera mezi okrajem nabídky a okrajem tlačítek */   list-style-type: none; } #menu ul li {   float: left;          /* zajišťuje vodorovné uspořádání položek nabídky */   border-right: 1px solid black;   border-top: 1px solid black;   border-bottom: 1px solid black;   border-left: 1px solid black;   margin-left: 5px; }   #menu a {   display: block;       /* odkaz se roztáhne přes celou položku nabídky */   padding: 5px 20px;    /* odsazení textu od okraje záložky */   color: red;        /* barva textu odkazu */   font-size: 105%;   font-weight: bold;   text-decoration: none;   transition: 0.8s;  }  #menu a:hover {     color: #EDF0EA;     background-color: red;     transition: 0.3s;  } #menu h2 {   display: none;        /* zrušení vykreslování nadpisu */ }

Živá ukázka

Ke stažení (pro funkčnost, rozbalte zip do nějaké složky)

Napište komentář!