Tartalomjegyzék

< CSS

CSS menü

Egyszerű vízszintes menü

Forráskódok

<nav>
    <ul>
	<li><a href="#">Második</a></li>
	<li><a href="#">Harmadik</a></li>
	<li><a href="#">Negyedik</a></li>
    </ul>
</nav>
style.css
nav ul {
	list-style-type: none;
}
nav ul li {
	/*display: inline;*/
	float:left;
	margin-left: 0;
}
nav ul li a {
	text-decoration: none;
	padding: 15px;
	background-color: #005500;
	color: white;
}
nav ul li a:hover {
	background-color: yellow;
	color: black;
}

Működés közben






Legördülő menüvel

Forrás

<div id="menu">
<ul>
	<li class="fo"><a href="masodik.html">Második</a>
		<ul>
			<li><a href="#">Almenü</a></li>
			<li><a href="#">Almenü</a></li>
			<li><a href="#">Almenü</a></li>
			<li><a href="#">Almenü</a></li>
		</ul>
	</li>
	<li class="fo"><a href="harmadik.html">Harmadik</a></li>
	<li class="fo"><a href="negyedik.html">Negyedik</a></li>
</ul>
</div>
style.css
body {
	margin: 2% 10%;
}
 
#menu ul {
	list-style-type: none;
	margin:0;
	padding:0;
 
}
#menu ul li.fo {
	/*display: inline*/;
	float:left;
	width: 60px;
}
#menu a {
	text-decoration: none;
	padding: 0 5px;
	background-color: #005500;
	color: white;
	display:block;
}
#menu a:hover {
	background-color: yellow;
	color: black;
}
 
#menu ul ul {
	position: absolute;
	display: none;
}
 
#menu ul li:hover ul {
	display:block;
}
 
#menu ul ul li {
	display: block;
}

Működés közben








Megoldás inline-block elemekkel

Forráskódok

<nav>
    <ul>
	<li><a href="#">Második</a></li>
	<li><a href="#">Harmadik</a></li>
	<li><a href="#">Negyedik</a></li>
    </ul>
</nav>
nav ul {
	list-style-type: none;
	font-size:0;
}
nav ul li {
	display: inline-block;
}
nav ul li a {
	text-decoration: none;
	padding: 15px;
	background-color: #005500;
	color: white;
	font-size: 1rem;
}
nav ul li a:hover {
	background-color: yellow;
	color: black;
}

Működés közben






Linkek