CSS Menü

Tulajdonságok

• A teljes menürendszer mérete kevesebb mint 13Kb
• 3 jpg, 1 css és 1 html fájl
• Tesztelve Internet Explorer, Mozilla Firefox és Safari böngészőkben

Letöltés

Az összes szükséges html, css és jpg fájl letöltése

HTML kód

<div id="menu2">
	<div id="menu2nav">
		<ul>
			<li id="kezdolap"><a href="http://css-menu.blog.hu">Kezdőlap</a></li>
			<li id="szolgaltatasok"><a class="aktiv" href="http://css-menu.blog.hu">Szolgáltatás</a></li>
			<li id="referenciak"><a href="http://css-menu.blog.hu">Referenciák</a></li>
			<li id="magunkrol"><a href="http://css-menu.blog.hu">Magunkról</a></li>
			<li id="kapcsolat"><a href="http://css-menu.blog.hu">Kapcsolat</a></li>
		</ul>
	</div>
</div>

CSS kód

#menu2 {
	height: 49px;
	width: 570px;
	background-image: url(images/menu02-image1.jpg);
	background-repeat: repeat-x;
	background-position: top;
	background-color: #6f1c00;
}

#menu2nav ul {
	height: 33px;
	margin: 0px;
	list-style-type: none;
	clear: left;
	padding: 0px 0px 0px 15px;
}

#menu2nav ul li {
	display: block;
	float: left;
	border: none;
	margin: 0px;
	height: 33px;
	padding: 0px;
}

#menu2nav ul li a {
	display: block;
	height: 20px;
	padding-top: 13px;
	text-align: center;
	margin: 0px;
	color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: bold;
}

#menu2nav ul li#kezdolap a { width: 92px; }
#menu2nav ul li#szolgaltatasok a { width: 121px; }
#menu2nav ul li#referenciak a { width: 114px; }
#menu2nav ul li#magunkrol a { width: 108px; }
#menu2nav ul li#kapcsolat a { width: 104px; }

#menu2nav ul li a:hover {
	background-image: url(images/menu02-image2.jpg);
	background-repeat: repeat-x;	
}

#menu2nav ul li a.aktiv { background-image: url(images/menu02-image3.jpg); background-repeat: repeat-x;height: 23px;padding-top: 10px; }