[[oktatas:web:css|< CSS]] ====== CSS menü ====== * **Szerző:** Sallai András * Copyright (c) Sallai András, 2012, 2013, 2014, 2020 * Licenc: GNU Free Documentation License 1.3 * Web: http://szit.hu ===== Egyszerű vízszintes menü ===== ==== Forráskódok ====



    
	Második
	Harmadik
	Negyedik


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 ====




	Második
		
			Almenü
			Almenü
			Almenü
			Almenü
		
	
	Harmadik
	Negyedik


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 ====



    
	Második
	Harmadik
	Negyedik


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 ===== * http://www.dynamicdrive.com/style/csslibrary/item/css3_semi_opaque_menu/ * http://cssmenumaker.com * http://www.netoktato.hu/?func=tut&act=view&cat=6&id=216 * http://www.tutorial.hu/menuk-css-el-szabvanyosan-es-gyorsan/