Ukážka menu >>

Základom menu je klasický vnorený nečíslovaný zoznam (skrátené) samozrejme všetko okorenené príslušným CSS-kom:

<ul class="submenu">
	<li><a href="#">O meste</a></li>
	<li><a href="#">Turistika</a></li>
	<li><a href="#"  class="menuLeftAct">Kultúra a voľný čas</a>
		<ul>
			<li><a href="#">Kino Mier</a></li>
			<li><a href="#">Kino Baník</a></li>
			<li><a href="#">Centrum voľného času</a></li>
			...
		</ul>
	</li>
	<li><a href="#">Kam v okolí</a></li>
	...
</ul>

/* *** CSS *** */

ul.submenu {
	list-style-type: none;
	width: 190px;
	margin: 0;
	padding: 0;
	background: #E3F0F9;
	border-top: 3px solid #4499D6;
	border-bottom: 3px solid #4499D6;
}

ul.submenu li {
	display: inline;
	padding: 0;
	margin: 0;
	background: none;
}

ul.submenu a {
	display: block;
	color: #000000;
	text-decoration: none;
	font: bold 12px/14px Arial, Verdana, sans-serif;
	background: #E3F0F9 url(fileadmin/rtg/user_upload/html/menu/menuArrow.gif) no-repeat 8px 6px;
	padding: 4px 10px 5px 20px;
	_padding: 5px 10px 4px 20px;
}

ul.submenu a:hover {
	color: #000000;
	text-decoration: underline;
}

ul.submenu a.menuLeftAct, ul.submenu a.menuLeftAct:hover {
	color: #FFFFFF;
	background: #4499D6 url(fileadmin/rtg/user_upload/html/menu/menuArrowAct.gif) no-repeat 8px 6px;
}

ul.submenu li ul {
	background: #ffffff;
	margin: 0;
	padding: 0;
	padding-bottom: 5px;
}

ul.submenu li ul a {
	color: #858585;
	font: normal 11px/13px Verdana, sans-serif;
	background: #ffffff url(fileadmin/rtg/user_upload/html/menu/menuSquare.gif) no-repeat 19px 10px;
	padding-left: 38px;
	padding: 4px 10px 4px 33px;
	_padding: 5px 10px 3px 33px;
}

*> ul.submenu li ul a {
	background-position: 19px 9px;
}

ul.submenu li ul a:hover, 
ul.submenu li ul a.menuLeftAct,
ul.submenu li ul a.menuLeftAct:hover {
	color: #000000;
	background: #ffffff url(fileadmin/rtg/user_upload/html/menu/menuSquare.gif) no-repeat 19px 10px;
}

*> ul.submenu li ul a:hover, 
ul.submenu li ul a.menuLeftAct,
ul.submenu li ul a.menuLeftAct:hover {
	background-position: 19px 9px;
}