Mi a megoldás , ha egy egyszerű és jól működő, pusztán néhány sor CSS felhasználásával megvalósított legördülő menüt szeretnénk? Először építsük fel a menüt rendezetlen listák segítségével, az alábbi módon:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<header>
	<ul>
		<li>
			<a href="#">Első főmenü</a>
			<ul class="sub-menu">
				<li><a href="#">Alemü 1</a></li>
				<li><a href="#">Alemü 2</a></li>
			</ul>
		</li>
		<li>
			<a href="#">Második főmenü</a>
			<ul class="sub-menu">
				<li><a href="#">Alemü 3</a></li>
				<li><a href="#">Alemü 4</a></li>
			</ul>
		</li>
	</ul>
</header>

A példában a HTML5-ben bemutatkozó <header> foglalja magába a menüt. Ez természetesen tetszőleges más HTML elem is lehet, jelen esetben azért esett rá a választás, mert jól olvashatóvá, strukturálttá teszi a mintakódot. A menü működési elve egyszerű: alapértelmezetten felsoroljuk a fő menüelemeket, a bennük lévő almenüket pedig elrejtjük. Amikor a menüelem fölé visszük az egeret (hover állapot), a benne lévő almenüt megjelenítjük a display tulajdonság felülírásával. Mivel az almenü megjelenésekor a fő elem mérete is megnő, a hover állapot érvényben marad akkor is, amikor az egeret az almenü valamely pontja fölé visszük. A másik fontos dolog a 25. sorban található. A position: absolute; gondoskodik róla, hogy az almenük a többi tartalom felett jelenjenek meg, ezáltal ne befolyásolják az oldal elrendezését. A példához tartozó CSS kód:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

header ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}
 
header ul li {
	background-color: #333;
	list-style: none;
	display: block;
}
 
header ul li a {
	color: #fff;
	display: block;
	padding: 5px 10px;
}
 
header > ul > li {
	float: left;
}
 
header .sub-menu {
	display: none;
	position: absolute;
	z-index: 100;
}
 
header li:hover > .sub-menu {
	display: block;
}