• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Hover elementu menu nie pokazuje podmenu

VPS Starter Arubacloud
0 głosów
186 wizyt
pytanie zadane 14 maja 2016 w HTML i CSS przez Sebastian Kopiczko Początkujący (370 p.)

Cześć,

tworząc poziome menu z jednym pionowym submenu napotkałem problem. Najeżdżając kursorem na jeden z elementów menu chciałem, aby rozwinęło się pod nim submenu. Jednak tak się nie dzieje. Proszę was o pomoc.

<ol class="navigation-menu">
	<li><a href="#">Strona główna</a></li>
	<li><a href="#">O nas</a></li>
	<li><a href="#">Kontakt</a></li>
	<li class="open-offert" aria-label="oferta"><a href = "#">Oferta</a></li>
		<ul class="dropdown-oferta">
			<li><a href="#">Przystań</a></li>
			<li><a href="#">Bar</a></li>
			<li><a href="#">Wypożyczalnia</a></li>
		</ul>
	</li>
</ol>

 

.page-nav ol li {
		float: left;
		padding: 1.4rem 1.6rem;
		text-decoration: none;
		border-radius: 6px;
		margin-top: 4.6rem;
		margin-right: 0.2rem;
		border: none;
	}

	.page-nav ol li:hover
	{
		background-color: #F9F9F9;
		box-shadow: 1px 2px 2px #d9d9d9 ;
		cursor: pointer;
	}

	.page-nav ol li:last-child:hover
	{
		background-color: red;
	}

	.page-nav .navigation-menu li a
	{
		display: inline-block;
		color: #000000;
		text-align: center;
		font-size: 1.6rem;
	}

	.dropdown-oferta
	{	
		width: 15rem;
		padding: 0;
		display: none;
		background-color: #f9f9f9;
		box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.2);
		border-radius: 6px;
		position: relative;
		float: right;
		margin-right: 7rem;
		text-align: left;
	}

	.page-nav .navigation-menu .dropdown-oferta li
	{
		padding: 1.1rem;
		margin: 0;
		border: none;
		width: 15rem;
	}

	.page-nav .navigation-menu .dropdown-oferta li:hover
	{
		background-color: #F0F0F0;
	}

	.dropdown-oferta li a
	{
		font-size: 1.5rem;
		color: #000;
	}

	.navigation-menu .open-offert:hover .dropdown-oferta
	{
		display: block;
	}
	
	.open-offert a
	{
		color: #000000;
		text-align: center;
		font-size: 1.6rem;
	}

 

1 odpowiedź

+1 głos
odpowiedź 14 maja 2016 przez Dzemtenjem Bywalec (2,660 p.)
<li class="open-offert" aria-label="oferta"><a href = "#">Oferta</a>
        <ul class="dropdown-oferta">
            <li><a href="#">Przystań</a></li>
            <li><a href="#">Bar</a></li>
            <li><a href="#">Wypożyczalnia</a></li>
        </ul>
</li>

Poprawiony fragment.

Zamknąłeś <li> zanim otworzyłeś <ul> a powinno się w nim zawierać, masz jego zamknięcie również za <ul> czyli <li> zamknięte dwa razy, pierwsze do usunięcia.

komentarz 14 maja 2016 przez Sebastian Kopiczko Początkujący (370 p.)
dziękuję za pomoc, działa ;)

Podobne pytania

0 głosów
1 odpowiedź 224 wizyt
pytanie zadane 9 lutego 2016 w HTML i CSS przez Michał628496 Pasjonat (17,340 p.)
+1 głos
1 odpowiedź 561 wizyt
pytanie zadane 26 stycznia 2021 w HTML i CSS przez Samek2222 Początkujący (440 p.)
0 głosów
1 odpowiedź 668 wizyt

93,014 zapytań

141,977 odpowiedzi

321,267 komentarzy

62,355 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 2

Można już zamawiać tom 2 książki "Wprowadzenie do bezpieczeństwa IT" - będzie to około 650 stron wiedzy o ITsec (17 rozdziałów, 14 autorów, kolorowy druk).

Planowana premiera: 30.09.2024, zaś planowana wysyłka nastąpi w drugim tygodniu października 2024.

Warto preorderować, tym bardziej, iż mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy dodatkowe 15% zniżki! Dziękujemy zaprzyjaźnionej ekipie Sekuraka za kod dla naszej Społeczności!

...