CSS Menü

Tulajdonságok

• A teljes menürendszer mérete kevesebb mint 16Kb
• 4 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="menu1">
	<div id="menu1nav">
		<ul>
			<li id="kezdolap"><a href="http://css-menu.blog.hu">Kezdőlap</a></li>
			<li id="elvalaszto"></li>
			<li id="szolgaltatasok"><a class="aktiv" href="http://css-menu.blog.hu">Szolgáltatások</a></li>
			<li id="elvalaszto"></li>
			<li id="referenciak"><a href="http://css-menu.blog.hu">Referenciák</a></li>
			<li id="elvalaszto"></li>
			<li id="magunkrol"><a href="http://css-menu.blog.hu">Magunkról</a></li>
			<li id="elvalaszto"></li>
			<li id="kapcsolat"><a href="http://css-menu.blog.hu">Kapcsolat</a></li>
			<li id="elvalaszto"></li>
		</ul>
	</div>
</div>

CSS kód

#menu1 {
	height: 46px;
	width: 570px;
	background-image: url(http://css-menu.blog.hu/media/images/menu01-image3.jpg);
	background-repeat: repeat-x;
	background-position: bottom;
	background-color: #91a7ab;
	padding-top: 8px;
}

#menu1nav ul {
	background: url(http://css-menu.blog.hu/media/images/menu01-image1.jpg);
	height: 38px;
	background-repeat: repeat-x;
	margin: 0px;
	list-style-type: none;
	clear: left;
	padding: 0px;
}

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

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

li#kezdolap a { width: 90px; }
li#szolgaltatasok a { width: 126px; }
li#referenciak a { width: 112px; }
li#magunkrol a { width: 106px; }
li#kapcsolat a { width: 102px; }

#menu1nav ul li a:hover {
	background-image: url(http://css-menu.blog.hu/media/images/menu01-image4.jpg);
	background-repeat: repeat-x;	
}

.aktiv { background-image: url(http://css-menu.blog.hu/media/images/menu01-image4.jpg); background-repeat: repeat-x; }

li#elvalaszto {
	font-size: 1px;	
	width: 1px;
	background-image: url(http://css-menu.blog.hu/media/images/menu01-image2.jpg);
	background-repeat: no-repeat;
}