Tekst źródłowy strony Szablon:ListaRozwijana

<html>
	<head>
		<style>
		/* CZĘŚĆ GŁÓWNA MENU */

		/* OTWARCIE LISTY */
		ol.MenuRozwijane {
			list-style-type:none; 							/* Żeby nie było numeracji ani wypunktowania dla listy */
			list-style-image:none;							/* Żeby nie było numeracji ani wypunktowania dla listy */
			padding:0;										/* Brak odstępów między komórkami (główna część listy) */
			margin:0;										/* Brak odstępów między komórkami (główna część listy) */
		}

		ol.MenuRozwijane:hover {
		}
		
		/* GLOBALNE USTAWIENIA ZNACZNIKA <a> W CAŁEJ LIŚCIE */
		ol.MenuRozwijane a {
			display:block;									/* Sposób wyświetlania */
			text-decoration:none;							/* Usunięcie podkreśleń tekstu (np. linków) gdy nie zaznaczone - to jest domyślne dla wszystkich elementów listy */
		}

		/* POSZCZEGÓLNE KOMÓRKI W PIERWSZYM WIERSZU - Z NICH BĘDZIE ROZSUWANIE MENU */
		ol.MenuRozwijane > li {
			font-weight: bold;								/* Pogrubienie tekstu */
			float:left;										/* Menu poziome */
			background-color: #EEEEEE;						/* Domyślny kolor listy */
			height: 1em;									/* Niezbędne, by lista się wysuwała a nie powiększała całą belkę */
			line-height: 0.75em;
		}

		/* POSZCZEGÓLNE KOMÓRKI W PIERWSZYM WIERSZU - Z NICH BĘDZIE ROZSUWANIE MENU (PO NAJECHANIU NA NIEGO KURSOREM) */
		ol.MenuRozwijane > li:hover {
		}

		/* WYGLĄD TEKSTU W PIERWSZYM WIERSZU W ZNACZNIKU <a> */
		ol.MenuRozwijane > li > a {
		}

		/* WYGLĄD TEKSTU W PIERWSZYM WIERSZU W ZNACZNIKU <a> (PO NAJECHANIU NA NIEGO KURSOREM)*/
		ol.MenuRozwijane > li > a:hover {
			text-decoration:underline; 						/* Podkreślenie przy zaznaczeniu - trzeba zmienić także "ol.MenuRozwijane > li > ul > li:hover > a" */
		}

		/* CZĘŚĆ ROZWIJANA MENU */

		/* UKRYCIE LISTY ROZWIJANEJ, GDY NIE ZAZNACZAMY PIERWSZEGO ELEMENTU */
		ol.MenuRozwijane > li > ul {
			list-style-type:none; 							/* Żeby nie było numeracji ani wypunktowania dla listy */
			list-style-image:none;							/* Żeby nie było numeracji ani wypunktowania dla listy */
			display:none;									/* Ukrycie listy gdy niepotrzebna */
			padding:0px;									/* Brak odstępów między pierwszym wierszem a rozwijaną listą*/
			margin:0px;										/* Brak odstępów między pierwszym wierszem a rozwijaną listą*/
			margin-top: 0.2em;
		}

		/* LISTA WIDOCZNA PO NAJECHANIU NA PIERWSZY ELEMENT */
		ol.MenuRozwijane > li:hover > ul {
			display:block;									/* Wysunięcie listy */
		}

		/* WYGLĄD POSZCZEGÓLNYCH WIERSZY W LIŚCIE ROZWINIĘTEJ */
		ol.MenuRozwijane > li > ul > li {
			list-style-type:none; 							/* Żeby nie było numeracji ani wypunktowania dla listy */
			list-style-image:none;							/* Żeby nie było numeracji ani wypunktowania dla listy */
			background-color: #EEEEEE;						/* Domyślny kolor listy */
			padding:0px;									/* Brak odstępów między komórkami (rozwijana lista) */
			margin:1px;										/* Brak odstępów między komórkami (rozwijana lista) */
			border-style: solid;
			border-width: 1px;
		}
		
		/* WYGLĄD POSZCZEGÓLNYCH WIERSZY W LIŚCIE ROZWINIĘTEJ (PO NAJECHANIU KURSOREM) */
		ol.MenuRozwijane > li > ul > li:hover {
		}
		
		/* WYGLĄD TEKSTU W ZNACZNIKU <a> W LIŚCIE ROZWINIĘTEJ */
		ol.MenuRozwijane > li > ul > li > a {
		}

		/* WYGLĄD TEKSTU W ZNACZNIKU <a> W LIŚCIE ROZWINIĘTEJ (PO NAJECHANIU KURSOREM) */
		ol.MenuRozwijane > li > ul > li:hover > a {
			text-decoration:underline; 						/* Podkreślenie przy zaznaczeniu - trzeba zmienić także "ol.MenuRozwijane > li > a:hover" */
		}

		/* WYGLĄD POSZCZEGÓLNYCH KOMÓREK W LIŚCIE ROZWINIĘTEJ PO ZAZNACZENIU TEJ LISTY */
		ol.MenuRozwijane > li:hover > ul  > li {
			position: relative; left: z-index: 99999; 		/* Ta część jest po to, żeby lista była zawsze na wierzchu */
		}

		/* WYGLĄD POSZCZEGÓLNYCH KOMÓREK W LIŚCIE ROZWINIĘTEJ (PO NAJECHANIU KURSOREM) PO ZAZNACZENIU TEJ LISTY */
		ol.MenuRozwijane > li:hover > ul  > li:hover {
		}
		</style>
	</head>
</html>