Ukážka menu >>

CSS štýly

/* Menu Main ************************************************************************************ */

#menu {
	height: 31px;
	font: bold 1px/12px Arial, Verdana, sans-serif;
	background: #ffffff;
	position: relative;
}

#menu ul {
	display: block;
	float: left;
	list-style-type: none;
	padding: 0;
	margin: 0;
}

#menu ul li {
	display: inline;
	padding: 0;
	margin: 0;
}

#menu a {
	display: block;
	float: left;
	height: 31px;
	text-decoration: none;
	font: bold 1px/12px Arial, Verdana, sans-serif;
	background: url(fileadmin/rtg/user_upload/html/menu/menuSnv.gif) no-repeat 0 -31px;
}

#menu ul li#m01 a { width: 143px; background-image: url(fileadmin/rtg/user_upload/html/menu/menuSnv.gif); color: #4499D6; }
#menu ul li#m02 a { width: 67px;  background-image: url(fileadmin/rtg/user_upload/html/menu/menuObcan.gif); color: #D32121; }
...

#menu ul li#m01 a:hover, #menu ul li#m01 a.menuAct { background-position: 0 0; }
#menu ul li#m02 a:hover, #menu ul li#m02 a.menuAct { background-position: 0 0; }
...

HTML kód

<div id="menu">
	<ul>
		<li id="m01"><a href="spisska_nova_ves/index.html" title="Mesto Spišská Nová Ves" class="menuAct"> </a></li>
		<li id="m02"><a href="obcan/index.html" title="Občan" > </a></li>
		<li id="m03"><a href="podnikatel/index.html" title="Podnikateľ" > </a></li>
		<li id="m04"><a href="navstevnik/index.html" title="Návštevník" > </a></li>
	</ul>
</div>