Nabídka rozbalovacího menu je obecně postačující, nicméně někdy se může hodit jeho úprava. Pro zvýraznění a i pro jeho přehlednost.

Pokud máte web, který vysouvací menu využívá, můžete zkusit postupovat podle tohoto návodu. Je to jednoduché a zvládne to skutečně každý. Navíc, pro přehlednost, jsem do kódu vložil zakomentované poznámky tak, abyste věděli kde se co upravuje.

Nejprve si musíte vytvořit rozbalovací menu ve své struktuře menu. Po vytvoření pak jednoduše do místa pro vlastní CSS, tedy Divi > Nastavení šablony > Všeobecné > Přizpůsobené CSS vložíte následující kód CSS:

/* Stylovani vysouvaciho menu - Zabza.eu */

#top-menu .sub-menu {
   background-color: #2ea3f2; /* Barva pozadi */
   border-top: 3px solid #0073aa; /* Barva horniho ohraniceni */
}

#top-menu .sub-menu li a {
   font-size: 14px; /* Velikost fontu */
   width: 100%;
   color: #fff;
   border-bottom: 1px solid #FFFFFF; /* Barva hranic */
}

.sub-menu li:hover {
   background-color: #0073aa; /* Barva menu pri prejeti mysi */
}

.sub-menu .current_page_item {
   background-color: #0073aa; /* Barva aktivni polozky menu - nefunguje vzdy */
}

#top-menu .sub-menu li {
   padding-left: 0px;
   padding-right: 0px;
   width: 100%;
}

#top-menu li li a {
   padding-top: 10px;
   padding-bottom: 8px;
}

#top-menu .sub-menu {
   padding-top: 0px;
   padding-bottom: 0px;
}

.nav ul li a:hover {
   opacity: 1;
   background-color: rgba(0,0,0,0);
}

No a to je všechno. Jak to vypadá můžete vidět na tomto webu. Upravte si to podle svých potřeb a zaručeně web zpřehledníte.

Je to vlastně jednoduché, že?