Hover elementu menu nie pokazuje podmenu

Question

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

 

Answer 1

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

Comments

dziękuję za pomoc, działa ;)