Rozwijane menu

pytanie zadane 28 kwietnia 2021 w HTML i CSS przez Hubert731 Obywatel (1,650 p.)
otwarte ponownie 28 kwietnia 2021 przez Hubert731

Witam czy można zrobic rozwijane menu w taki sposób, że po najechaniu na jakiś div, otwiera się lista?
poniżej moj kod ktory, nie wiem dlaczego nie dziala.

<!DOCTYPE HTML>
<html lg="pl">
<head>
     <meta charset="utf-8" />
	 <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/>
	 <title>Strona główna</title>
	 <meta name="description" content="Podstrony" />
	 <meta name ="keywords" content="podstorny" />
	 <link rel="preconnect" href="https://fonts.gstatic.com">
	<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">
	<link href="css/fontello.css" rel="stylesheet" type="text/css">
	 
	 <style>
		body{
			font-family: 'Roboto', sans-serif;
			background-image: url("img/tlo.png");  /* This pattern is downloaded from www.subtlepatterns.com */
		}
		#title{
			border-bottom: #2F2E2E dashed 2px;
			color:#2F2E2E;
			width:100%;
			text-align:center;
			font-size:35px;
			letter-spacing:3px;
			word-spacing:6px;
		}
		#menu{
			font-size:35px;
			padding: 20px;
			margin-top:80px;
			width:300px;
			margin-left:auto;
			margin-right:auto;
			background-color:#A09D9D;
		}
		#menu{
			font-size:35px;
			margin-top:80px;
			width:300px;
			margin-left:auto;
			margin-right:auto;
			background-color:#A09D9D;
			padding:0;
		}
		#main{
			padding: 20px;
		}
		#main:hover{
			color:#B7B7B7;
			background-color: #101010;
		}
		ul{
			list-style-type:none;
			text-align:center;
			padding:0;
			margin:0;
			display:none;
		}
		li{
			padding:20px 0;
			border-bottom: #101010 dashed 2px;
		}
		li:hover{
			color:#B7B7B7;
			background-color: #101010;
		}
		li:first-child{
			border-top: #101010 dashed 2px;
		}
		#main:hover  > ul {
			display: block;
		}
	 </style> 
	 
</head>
<body>
	<div id="title">
		<h1>Wybierz Podstrone</h1>
	</div>
	<div id="menu">
		<div id="main">
			Podstrony  &nbsp;&nbsp;&nbsp;&nbsp;<i class="icon-down-open"></i>
		</div>
		<ul>
			<li>Pory roku</li>
			<li>Tabele</li>
			<li>Listy</li>
		</ul>
	</div>
</body>
</html>

2 odpowiedzi

odpowiedź 28 kwietnia 2021 przez ScriptyChris Mędrzec (190,190 p.)
wybrane 28 kwietnia 2021 przez Hubert731

Najlepsza

W Twoim przypadku powinien zadziałać styl

#main:hover + ul {
  display:block;
}

Ale działa to słabo, więc przynajmniej przeniósłbym ul do #main i wtedy użył selektora #main:hover ul { }

Na marginesie: nie powinno się stylować po id → https://csswizardry.com/2012/11/code-smells-in-css/#ids

Pokaż 11 poprzednich komentarzy

komentarz 28 kwietnia 2021 przez ScriptyChris Mędrzec (190,190 p.)

jeśli chce wyswietlac a jako blok, to jak to zrobic, zeby takze wlaczac w to padding?

Dosłownie użyć display: block. Jeśli chodzi o wliczanie paddingów, to nie wiem co dokładnie masz na myśli, ale dedukuję, że albo chodzi Ci o wliczanie tego w szerokość/wysokość - wtedy użyj box-sizing: border-box, albo o wliczanie pionowych wartości dla padding/margin - wtedy (jeśli chcesz element ułożony w jednej linii) użyj display: inline-block

komentarz 28 kwietnia 2021 przez Hubert731 Obywatel (1,650 p.)

http://prntscr.com/1277xet

Zielony jest padding, a jest tylko w obszarze niebieskim, a ja bym chciał, żeby a obejmował blok razem z paddingiem

komentarz 28 kwietnia 2021 przez ScriptyChris Mędrzec (190,190 p.)

Jeśli dobrze rozumiem, to chcesz ustawić height a nie padding, a height nie zadziała na elemencie inline - musisz użyć display: block, albo display: inline-block.

komentarz 28 kwietnia 2021 przez Hubert731 Obywatel (1,650 p.)

jeśli usune padding w ul, to tekst bedzie przyklejony do gory, a ja tego nie chce. Chce zeby tekst byl tak jak jest, ale zeby a calego bloku wraz z paddingiem

komentarz 28 kwietnia 2021 przez ScriptyChris Mędrzec (190,190 p.)

Nie bardzo rozumiem o co Ci chodzi. :)

odpowiedź 28 kwietnia 2021 przez VBService Ekspert (253,340 p.)

Tu masz przykład, gdzie <a> element wypełnia cały <li> element:

<ul>
  <li>
    <a href="#">Podstrony &#9662;</a>
    <ul class="dropdown">
      <li><a href="#PoryRoku">Pory roku</a></li>
      <li><a href="#Tabele">Tabele</a></li>
      <li><a href="#Listy">Listy</a></li>
    </ul>
  </li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

ul {
  padding: 0;
  list-style: none;
  background-color: #f2f2f2;
  width: 148px;
}
ul li {
  display: inline-block;
  position: relative;
  line-height: 1.2em;
  text-align: left;
}
ul li a {
  display: block;
  padding: 0.5em 2em;
  color: #333;
  text-decoration: none;
  transition: all 0.3s
}
ul li a:hover {
  color: #fff;
  background-color: #939393;
}
ul li ul.dropdown {
  min-width: 100%;
  background-color: #f2f2f2;
  display: block;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  z-index: 999;
  left: 0;
  transition: all 0.5s
}
ul li ul.dropdown li {
  display: block;
}
ul li:hover ul.dropdown {
  opacity: 1;
  visibility: visible;
}