problem, html, css, menu, kod, code. nie działa, animacja

pytanie zadane 16 listopada 2019 w HTML i CSS przez kubaa322 Użytkownik (710 p.)

Witam mam problem z kodem z rozwijaniem sie menu. Zrobilem to checkboxowym-hakiem i nie wiem czemu ale nie dziala mi to. Prosze o pomoc z gory dziekuje

.menu-zawartosc
{
	font-family: impact;
	overflow: hidden;
	max-height: 50;
	padding: 0 0 0 50px;
}
.menu-podstawa
{
	background-color: white;
	border-bottom: 3px solid black;
	box-shadow: 1px 2px 3px gray;
}
.menu-podstawa ul
{
	list-style-type: none;
}
.menu-podstawa a
{
	text-decoration: none;
	display: block;
	color: black;
}
.menu-podstawa label
{
	font-family: impact;
	display: block;
	background: url(menu.png) no-repeat left center;
	background-size: 30px 30px;
	padding: 10px 0px 10px;
	cursor: pointer;
}
input#menu
{
	display: none;
}
input[type=checkbox]:checked +label 
{
	background-image: url(close.png);
	background-size: 30px 30px;
	padding: 10px 0px 10px;
	cursor: pointer;
}
input[type=checkbox]:checked ~ label 
{
    background-image: url(close.png);
}
input[type=checkbox]:checked ~ .menu-zawartosc 
{
	max-height: 100%;
}

komentarz 16 listopada 2019 przez lateM Pasjonat (17,660 p.)

Gdzie HTML?

komentarz 16 listopada 2019 przez kubaa322 Użytkownik (710 p.)

Załaczam w takim razie HTML. Jednak wydaje mi sie ze to w pliku CSS jest jakis problem

<!DOCTYPE.html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="menu.css">
</head>
<body>
<div class="menu-podstawa">
	<div class="menu-zawartosc">
	<input type="checkbox" id="menu">
	<label for="menu"><center>Menu</center></label>
		<ul>
			<li><a href="#">1</a></li>
			<li><a href="#">2</a></li>
			<li><a href="#">3</a></li>
			<li><a href="#">4</a></li>
			<li><a href="#">5</a></li>
			<li><a href="#">6</a></li>
		</ul>
	</div>
</div>
</body>
</!DOCTYPE.html>

2 odpowiedzi

odpowiedź 16 listopada 2019 przez pseudoExpert Obywatel (1,300 p.)
wybrane 16 listopada 2019 przez kubaa322

Najlepsza

Ponieważ w kodzie HTML

<div class="menu-zawartosc">

nie jest potomkiem

<input type="checkbox" id="menu">

Przenieś linię

<div class="menu-zawartosc">

pod linię

<label for="menu"><center>Menu</center></label>

i będzie działało.

Oczywiście konieczne będzie nieco inne ostylowanie elementów bo się strona troszkę sypie,

ale mechanizm działa - reszta to kosmetyka.