logo

Lekcja 6: Menu rozwijalne

Najpierw tworzymy nieuporządkowaną zagnieżdżoną liste odsyłaczy 

				<ul>
				<li><a href="#">Opcja 1</a>
					<ul>
						<li><a href="#">Opcja a</a></li>
						<li><a href="#">Opcja b</a></li>
						<li><a href="#">Opcja c</a></li>
					</ul>
				</li>
				<li><a href="#">Opcja 2</a></li>
				<li><a href="#">Opcja 3</a></li>
			</ul>

Następnie na ul zewnętrznym ustawiamy position: relative a na wewnetrzny, absolute. Aby menu zagnieżdżone wyświetlało się pod elementem który chcemy, ustawiamy jego własciwości display: block oraz przesuwamy. Następnie musimy jeszcze zrobić by nasze menu "zagnieżdżone" było domyślnie niewidoczne, tylko dopiero po najechaniu kursorem się wysuwało, więc użyjemy znaku ">". Kod będzie wtedy wyglądał następująco: 

				ul{
					position: relative;
					list-style-type: none;
				}
				ul ul{
					position: absolute;
					display: none;
				}
				ul li:hover > ul{
					display: block;
				}
				li{
					display: block;
				}
				a{
					display: inline-block; 
					text-decoration: none;	
					padding: 10px;
					width: 200px;
					background-color: #30BCED;
					border: 3px solid #F0EFF4;
					color: #F0EFF4;
				}

Po wszystkich zabiegach wykonanych poprawnie nasze menu powninno wyglądać tak: