Felhasználói eszközök

Eszközök a webhelyen


oktatas:web:css:css_menue

< CSS

CSS menü

  • Szerző: Sallai András
  • Copyright © Sallai András, 2012, 2013, 2014
  • Licenc: GNU Free Documentation License 1.3

Egyszerű vízszintes menü

Forrás

Az idevágó html rész

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

Próba

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;
}

Próba

Linkek

oktatas/web/css/css_menue.txt · Utolsó módosítás: 2019/08/22 19:33 szerkesztette: admin