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

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

Działają oba sposoby, dziękuję za pomoc.

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

tylko że teraz mam inny problem, nie moge kursorem przejechac na liste, bo elemnty zniakaja :/

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

Propozycja z umieszczeniem ul wewnątrz #main powinna ten problem rozwiązywać. Jeśli nie, to pokaż kod - może coś źle przeniosłeś.

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

jak umieszczam w mainie, to caly css sie sypie oraz nadal nie dziala. Mysle, ze moge zamiast maina, zrobic kolejna liste

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

Jak cały CSS się sypie, gdy umieszczasz w #main? Pokaż proszę kod, który teraz masz. A najlepiej umieść na np. CodePen.io.

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

<!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;
			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;
			cursor:pointer
		}
		ul{
			list-style-type:none;
			text-align:center;
			padding:0;
			margin:0;
			display:none;
			margin-top:20px;
		}
		ul a{
			text-decoration:none;
			color:black;
		}
		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;
			
		ul:hover ul{
			display: block;
		}
	 </style> 
	 
</head>
<body>
	<div class="title">
		<h1>Wybierz Podstrone</h1>
	</div>
	<div class="menu">
		<div class="main">
			Podstrony  &nbsp;&nbsp;&nbsp;&nbsp;<i class="icon-down-open"></i>
			<ul>
			<a href="#"><li>Pory roku</li></a>
			<a href="#"><li>Tabele</li></a>
			<a href="#"><li>Listy</li></a>
		</ul>
		</div>
		
	</div>
</body>
</html>

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

bordery sie psuja, co nie zmienia faktu, ze nadal nie dziala

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

nie wiem dlaczego, przestalo dzialac to dla pierwszego elementu z listy

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

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

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

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

Nie .main:hover + ul tylko .main:hover ul (znak plusa był potrzebny, gdy ul było rodzeństwem elementu .main); oraz nie dodałeś klamry zamykającej. Po drugie ul:hover ul jest zbędne, jeśli nie masz w środku drugiej listy, a poza tym ten selektor jest trochę dziwny. Po trzecie, to jest nieprawidłowy zapis dla listy:

<ul>
            <a href="#"><li>Pory roku</li></a>
            <a href="#"><li>Tabele</li></a>
            <a href="#"><li>Listy</li></a>
        </ul>

Lista składa się z <ul> (lub <ol>) oraz elementów <li>. Pozostałe elementy - jak np. linki - powinny być wewnątrz poszczególnych <li>.

Po czwarte: kolor tła dla dla .main:hover zlewa się z kolorem czcionki linków i widać je dopiero po najechaniu na nie myszką.

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

ul:hover ul zapomniałem usunąć - racja.

Liste poprawiłem, ale musze jeszcze zmienic wlasciwosci dla koloru a, dlatego sie zlewa.

No ale mam właśnie inny problem, bo chce, zeby a bylo wielkosci li, ale nie wlicza sie do tego padding, czy jesli ustawie na sztywno wielkosc, to bedzie prawidlowo?

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 (254,260 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;
}