Jak usunąć display:inline-block ?

pytanie zadane 23 lutego 2017 w HTML i CSS przez Karol Loczeski Użytkownik (820 p.)

Witam. Zacząłem kombinować jak aby jak najwięcej zrozumieć i tak oto powstało zakręcone menu. Niestety mam problem, nie wiem jak wyłączyć opcje display:inline-block. Dokładnie chciałbym aby z "poziomu X" wusywała się pionowa belka a z niej następne menu tylko z lewej strony. Trochę udało ale wszystko układa się obok siebie zamiast pod sobą, jak to zrobić, czy w ogóle da się to zrobić ? Próbowałem wrzucić clear:both, ale bez skutku, chyba że źle je wklejam...

<!DOCTYPE html>
<html lang="pl">
<head>
		<title>kebab</title>
		<meta charset="utf-8">
		<meta name="description" content="ćwiczenia z divami">
		<meta name="keywords" content="kafelki,div,cwiczenia">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
		<link href="style1.css" style="text/css" rel="stylesheet">
</head>

<body>
	

<div id="nic"></div>
<ul class="menu1">  
	

		<li class="glowne"><a href="#">Zakładka 1</a> 
			<ul class="menu2">
				<li class="glowne"><a href="#">Podzakładka 1</a>
					<ul class="menu3">
							<li><a href="#">Podzakładka 3</a></li>
							<li><a href="#">Podzakładka 3</a></li>
							<li class="glowne"><a href="#">poziomy</a>
								<ul class="menu4">
									<li><a href="#">poziomy</a></li>
									<li><a href="#">poziomy</a></li>
									<li><a href="#">poziomy</a></li>
									
									<li class="glowne"><a href="#">poziom X</a>

										<ul class="menu5">
											<li><a href="#">poziom dol</a></li>
											<li><a href="#">poziom dol</a></li>
											<li><a href="#">poziom dol</a></li>
												<li class="glowne"><a href="#">dol</a>
													<ul class="menu6">
													<li><a href="#">poziom w lewo</a></li>
													<li><a href="#">poziom w lewo</a></li>
													<li><a href="#">poziom w lewo</a></li>
													<li><a href="#">poziom w lewo</a></li>
													</ul>
													</li>
										</ul>
										</li>
									</ul>
							</li>
							
					</ul>
					</li>
				<li><a href="#">Podzakładka 1</a></li>
				<li><a href="#">Podzakładka 1</a></li>
				<li><a href="#">Podzakładka 1</a></li>
			</ul>
		</li>


		<li class="glowne"><a href="#">Zakładka 2</a>
			<ul class="menu2">
				<li><a href="#">Podzakładka 2</a></li>
				<li><a href="#">Podzakładka 2</a></li>
				<li><a href="#">Podzakładka 2</a></li>
				<li><a href="#">Podzakładka 2</a></li>
			</ul>
		</li>

</ul>





</body>

</html>

body
{
	background-color: grey;
	margin: 0 !important;
	 /*marginesy - w przeglaradce*/
}






#nic

{	
	width: 100%;
	height: 200px;

}


ul
{
margin: 0;
padding: 0;
width: 200px;
background-color: green;
font-size: 25px;
text-align: center;
list-style-type: none;
}
li 
{
position: relative;
list-style: none;
height: 50px;
}

ul ul
{
position: absolute; 
top:0;
left:200px;
display:;

}

a
{
display: block;
padding: 5px;
text-decoration: none;
width:auto;
color:white;
}

a:hover
{
	color:red;
}

li:hover
{
	background-color: black;
}

li.glowne:hover
{
background-color: blue;
color: #ff00ff;
}

ul.menu1  li.glowne:hover  ul.menu2 
{
display: block;

}

ul.menu2 li.glowne:hover ul.menu3
{
display: block;

}
ul.menu3 li.glowne:hover ul.menu4
{
display: block;

}
ul.menu4 li.glowne:hover ul.menu5
{
display: block;

}
ul.menu5 li.glowne:hover ul.menu6
{
display: block;

}

ul>li>ul>li>ul>li>ul>li
{
	display:inline-block;
}
ul>li>ul>li>ul>li>ul
{
	width:500px;

}

ul>li>ul>li>ul>li>ul>li>ul
{
	width: 200px;
	top:50px;
	left:0px;

}
ul>li>ul>li>ul>li>ul>li>ul>li>ul
{
	width: 200px;
	
	top:0px;
	left:-250px;
	
}

3 odpowiedzi

odpowiedź 23 lutego 2017 przez hoktaur Pasjonat (22,250 p.)
edycja 23 lutego 2017 przez hoktaur

A poklikałem i naklikałem coś takiego:

<!DOCTYPE html>
<html lang="pl">
<head>
	<title></title>
	<meta charset="utf-8">
	<style>
		
		div {
			border: 1px solid red;
			width: 100px;
		}
		
		div:hover > div{
			display: block;
		}
		
		.hidden {
			display: none;
		}
		
	</style>
  
</head>
<body>
	

		<div>
			Menu 1
			<div class="hidden">
				<div>
					Menu 1-1<br />
					<div class="hidden">
						Menu 1-1-1<br />
						Menu 1-1-2<br />
						Menu 1-1-3<br />
					</div>
				</div>
				<div>				
					Menu 1-2<br />
						<div class="hidden">
							Menu 1-2-1<br />
							Menu 1-2-2<br />
							Menu 1-2-3<br />
						</div>				
				</div>
				<div>
					Menu 1-3
					<div class="hidden">
						Menu 1-3-1<br />
						Menu 1-3-2<br />
						Menu 1-3-3<br />
					</div>
				</div>
			</div>
		</div>
		<div>
			Menu 2
			<div class="hidden">
				<div>
					Menu 2-1<br />
					<div class="hidden">
						Menu 2-1-1<br />
						Menu 2-1-2<br />
						Menu 2-1-3<br />
					</div>
				</div>
				<div>				
					Menu 2-2<br />
						<div class="hidden">
							Menu 2-2-1<br />
							Menu 2-2-2<br />
							Menu 2-2-3<br />
						</div>				
				</div>
				<div>
					Menu 2-3
					<div class="hidden">
						Menu 2-3-1<br />
						Menu 2-3-2<br />
						Menu 2-3-3<br />
					</div>
				</div>
			</div>
		</div>
		<div>
			Menu 3
			<div class="hidden">
				<div>
					Menu 3-1<br />
					<div class="hidden">
						Menu 3-1-1<br />
						Menu 3-1-2<br />
						Menu 3-1-3<br />
					</div>
				</div>
				<div>				
					Menu 3-2<br />
						<div class="hidden">
							Menu 3-2-1<br />
							Menu 3-2-2<br />
							Menu 3-2-3<br />
						</div>				
				</div>
				<div>
					Menu 3-3
					<div class="hidden">
						Menu 3-3-1<br />
						Menu 3-3-2<br />
						Menu 3-3-3<br />
					</div>
				</div>
			</div>
</body>
</html>

i jeszcze na listach:

<!DOCTYPE html>
<html lang="pl">
<head>
	<title></title>
	<meta charset="utf-8">
	<style>
	
		ul {
			border: 1px solid red;
			width: 100px;
			padding: 0px;
			list-style-type: none;
		}
		
		li:hover > ul{
			display: block;
		}
		
		.hidden {
			display: none;
		}
		
	</style>
  
</head>
<body>
	
	<ul>
		<li>
			Menu 1
			<ul class="hidden">
				<li>
					Menu 1-1<br />
					<ul class="hidden">
						<li>
							Menu 1-1-1
						</li>
						<li>
							Menu 1-1-2
						</li>
						<li>
							Menu 1-1-3<br />
						</li>
					</ul>
				</li>
				<li>				
					Menu 1-2<br />
						<ul class="hidden">
							<li>
								Menu 1-2-1
							</li>
							<li>
								Menu 1-2-2
							</li>
							<li>
								Menu 1-2-3
							</li>
						</ul>				
				</li>
				<li>
					Menu 1-3
					<ul class="hidden">
						<li>
							Menu 1-3-1
						</li>
						<li>
							Menu 1-3-2
						</li>
						<li>
							Menu 1-3-3
						</li>
					</ul>
				</li>
			</ul>
		</li>
		<li>
			Menu 2
			<ul class="hidden">
				<li>
					Menu 2-1<br />
					<ul class="hidden">
						<li>
							Menu 2-1-1
						</li>
						<li>
							Menu 2-1-2
						</li>
						<li>
							Menu 2-1-3<br />
						</li>
					</ul>
				</li>
				<li>				
					Menu 1-2<br />
					<ul class="hidden">
						<li>
							Menu 2-2-1
						</li>
						<li>
							Menu 2-2-2
						</li>
						<li>
							Menu 2-2-3
						</li>
					</ul>				
				</li>
				<li>
					Menu 1-3
					<ul class="hidden">
						<li>
							Menu 2-3-1
						</li>
						<li>
							Menu 2-3-2
						</li>
						<li>
							Menu 2-3-3
						</li>
					</ul>
				</li>
			</ul>
		</li>
		<li>
			Menu 3
			<ul class="hidden">
				<li>
					Menu 3-1<br />
					<ul class="hidden">
						<li>
							Menu 3-1-1
						</li>
						<li>
							Menu 3-1-2
						</li>
						<li>
							Menu 3-1-3<br />
						</li>
					</ul>
				</li>
				<li>				
					Menu 1-2<br />
					<ul class="hidden">
						<li>
							Menu 3-2-1
						</li>
						<li>
							Menu 3-2-2
						</li>
						<li>
							Menu 3-2-3
						</li>
					</ul>				
				</li>
				<li>
					Menu 1-3
					<ul class="hidden">
						<li>
							Menu 3-3-1
						</li>
						<li>
							Menu 3-3-2
						</li>
						<li>
							Menu 3-3-3
						</li>
					</ul>
				</li>
			</ul>
		</li>
	</ul>
	
</body>
</html>

komentarz 24 lutego 2017 przez Karol Loczeski Użytkownik (820 p.)

chyba się nie zrozumieliśmy, bo podany przez Ciebie przykład nijak ma się do mojego pytania.

komentarz 24 lutego 2017 przez Karol Loczeski Użytkownik (820 p.)
edycja 24 lutego 2017 przez Karol Loczeski

Chodzi mi o to aby z menu pionowego wysuwało się menu poziome, a z poziomego znowu pionowe i z pionowego również pionowe tylko z lewej strony. Czy da się to zrobić na listach?

W pewnym momencie musimy użyć display:inline-block, tylko nie wiem jak usunąć tą komende aby nie działała już w następnym menu ??

Wiem że można użyć float:left i clear:both i działa to ładnie, ale wtedy opcje nie są wyśrodkowane, a nie chcę dodatkowo wrzucać marginesów gdyż od początku mam wszystko wycentrowane.

komentarz 24 lutego 2017 przez hoktaur Pasjonat (22,250 p.)

no wlasnie troche to zagmatwales najpierw piszesz

Dokładnie chciałbym aby z "poziomu X" wusywała się pionowa belka a z niej następne menu tylko z lewej strony.

cos o lewej a potem ze ma byc pod:

Trochę udało ale wszystko układa się obok siebie zamiast pod sobą

wiec napisalem i jest pod...

Ale mniejsza o to czy mozesz to jakos naszkicowac jak menu ma wygladac po rozlozeniu?

komentarz 24 lutego 2017 przez Karol Loczeski Użytkownik (820 p.)

Sory że tak pomieszałem.

Takie menu zrobiłem. Tylko w menu "poziomy" użyłem float:left, da się wyśrodkować te menu bez użycia marginesów?

Chciałem zamiast float:left użyć display:inline-block, ponieważ ładnie wszystko jest wyśrodkowane wtedy, ale niestety nie wiem jak w dalszej części usunąć tą komendę.

komentarz 24 lutego 2017 przez hoktaur Pasjonat (22,250 p.)

Czy ja tam widze unity?

komentarz 24 lutego 2017 przez Karol Loczeski Użytkownik (820 p.)

Nie rozumiem.

komentarz 24 lutego 2017 przez hoktaur Pasjonat (22,250 p.)

no wiesz Ubuntu i unity? :)

komentarz 24 lutego 2017 przez Karol Loczeski Użytkownik (820 p.)

No tak, Ubuntu. Nawiązując do mojego pytania da się usunąć display:inline-block, tak aby następne menu było już pionowo?

komentarz 24 lutego 2017 przez hoktaur Pasjonat (22,250 p.)

Spróbuje coś na to zaradzić ale najpierw muszę tel. naprawić

komentarz 24 lutego 2017 przez Karol Loczeski Użytkownik (820 p.)

Bo generalnie aby usunąć float:left dajemy clear:both.

No to dla display:inline-block jest może jakaś komenda tajna ? :P

odpowiedź 24 lutego 2017 przez Karol Loczeski Użytkownik (820 p.)

odpowiedź 24 lutego 2017 przez hoktaur Pasjonat (22,250 p.)

Ok przeanalizowałem twoje kombo i problem jest w twoim zapisie jest najprawdopodobniej związany z linią w CSS

ul > li > ul > li > ul > li > ul > li

chodzi o to że po pierwsze za dużo tzw. > (Child Selector) to jest w ogóle nieczytelne i mało uniwersalne jak będziesz miał bardzo duże menu to co napiszesz

ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li

itd. żeby wystylizować kolejny div po to są class'y

druga sprawa to te początkowe ul ti nie jest pierwszy ul tylko będzie pasował do:

ul > li > ul > li > ul > li > ul > li >ul > li

jaki i do

ul > li > ul > li > ul > li > ul > li > ul > li

a żeby się nie przemądrzać za fest chwile posiedziałem i napisałem dla ciebie to co chciałeś zrobić, teraz ty znajdź i chwile i analizuj jak to zrobiłem

<!DOCTYPE html>
<html lang="pl">
<head>
	<title></title>
	<meta charset="utf-8">
	<style>
	
		ul {
			padding: 0px;
			margin-left: 150px;
			margin-top: -20px;
			list-style-type: none;
			position: absolute;
		}
		
		li {
			width: 150px;
		}
		
		.left {
			margin-left: -150px;
		}
		
		.horizontal > li > ul {
			margin-left: 0px;
			margin-top: 0px;
		}
		
		#menu {
			margin-left: 0px;
			margin-top: 0px;
		}
		
		li:hover > ul {
			display: block;
		}
		
		li:hover > .horizontal {
			width: 1000px;			
		}
		
		li:hover > .horizontal > li {
			float: left;
		}
		
		li {
			background-color: green;
			text-align: center;
			color: white;
		}
		
		li:hover {
			background-color: blue;
		}
		
		.hidden {
			display: none;
		}
		
	</style>
  
</head>
<body>
	
	<ul id="menu">
		<li>
			Menu 1
			<ul class="hidden">
				<li>
					Menu 1-1<br />
					<ul class=" hidden horizontal">
						<li>
							Menu 1-1-1
							<ul class="hidden">
								<li>
									Menu 1-1-1-1
									<ul class="hidden">
										<li>
											Menu 1-1-1-1-1
										</li>
										<li>
											Menu 1-1-1-1-2
										</li>
										<li>
											Menu 1-1-1-1-3
										</li>
									</ul>
								</li>
								<li>
									Menu 1-1-1-2
									<ul class="hidden horizontal">
										<li>
											Menu 1-1-1-2-1
											<ul class="hidden">
												<li>
													Menu 1-1-1-2-1-1
													<ul class="hidden left">
														<li>
															Menu 1-1-1-2-1-1-1
															<ul class="hidden">
																<li>
																	Menu 1-1-1-2-1-1-1-1
																</li>
																<li>
																	Menu 1-1-1-2-1-1-1-2
																</li>
																<li>
																	Menu 1-1-1-3-1-1-1-3
																</li>
															</ul>
														</li>
														<li>
															Menu 1-1-1-2-1-1-2
															<ul class="hidden left">
																<li>
																	Menu 1-1-1-2-1-1-2-1
																</li>
																<li>
																	Menu 1-1-1-2-1-1-2-2
																</li>
																<li>
																	Menu 1-1-1-2-1-1-2-3
																</li>
															</ul>
														</li>
														<li>
															Menu 1-1-1-3-1-1-3
															<ul class="hidden">
																<li>
																	Menu 1-1-1-3-1-1-3-1
																</li>
																<li>
																	Menu 1-1-1-2-1-1-3-2
																</li>
																<li>
																	Menu 1-1-1-3-1-1-3-3
																</li>
															</ul>
														</li>
													</ul>
												</li>
												<li>
													Menu 1-1-1-2-1-2
												</li>
												<li>
													Menu 1-1-1-2-1-3
												</li>
											</ul>
										</li>
										<li>
											Menu 1-1-1-2-2
											<ul class="hidden">
												<li>
													Menu 1-1-1-2-2-1
												</li>
												<li>
													Menu 1-1-1-2-2-2
												</li>
												<li>
													Menu 1-1-1-3-2-2
												</li>
											</ul>
										</li>
										<li>
											Menu 1-1-1-2-3
											<ul class="hidden">
												<li>
													Menu 1-1-1-2-3-1
												</li>
												<li>
													Menu 1-1-1-2-3-2
												</li>
												<li>
													Menu 1-1-1-3-3-2
												</li>
											</ul>
										</li>
									</ul>
								</li>
								<li>
									Menu 1-1-1-3
									<ul class="hidden">
										<li>
											Menu 1-1-1-3-1
										</li>
										<li>
											Menu 1-1-1-3-2
										</li>
										<li>
											Menu 1-1-1-3-3
										</li>
									</ul>
								</li>
							</ul>
						</li>
						<li>
							Menu 1-1-2
							<ul class="hidden">
								<li>
									Menu 1-1-2-1
								</li>
								<li>
									Menu 1-1-2-2
								</li>
								<li>
									Menu 1-1-2-3
								</li>
							</ul>
						</li>
						<li>
							Menu 1-1-3
							<ul class="hidden">
								<li>
									Menu 1-1-3-1
								</li>
								<li>
									Menu 1-1-3-2
								</li>
								<li>
									Menu 1-1-3-3
								</li>
							</ul>
						</li>
					</ul>
				</li>
				<li>				
					Menu 1-2<br />
						<ul class="hidden">
							<li>
								Menu 1-2-1
							</li>
							<li>
								Menu 1-2-2
							</li>
							<li>
								Menu 1-2-3
							</li>
						</ul>				
				</li>
				<li>
					Menu 1-3
					<ul class="hidden">
						<li>
							Menu 1-3-1
						</li>
						<li>
							Menu 1-3-2
						</li>
						<li>
							Menu 1-3-3
						</li>
					</ul>
				</li>
			</ul>
		</li>
		<li>
			Menu 2
			<ul class="hidden">
				<li>
					Menu 2-1<br />
					<ul class="hidden">
						<li>
							Menu 2-1-1
						</li>
						<li>
							Menu 2-1-2
						</li>
						<li>
							Menu 2-1-3<br />
						</li>
					</ul>
				</li>
				<li>				
					Menu 1-2<br />
					<ul class="hidden">
						<li>
							Menu 2-2-1
						</li>
						<li>
							Menu 2-2-2
						</li>
						<li>
							Menu 2-2-3
						</li>
					</ul>				
				</li>
				<li>
					Menu 1-3
					<ul class="hidden">
						<li>
							Menu 2-3-1
						</li>
						<li>
							Menu 2-3-2
						</li>
						<li>
							Menu 2-3-3
						</li>
					</ul>
				</li>
			</ul>
		</li>
		<li>
			Menu 3
			<ul class="hidden">
				<li>
					Menu 3-1<br />
					<ul class="hidden">
						<li>
							Menu 3-1-1
						</li>
						<li>
							Menu 3-1-2
						</li>
						<li>
							Menu 3-1-3
						</li>
					</ul>
				</li>
				<li>				
					Menu 1-2<br />
					<ul class="hidden">
						<li>
							Menu 3-2-1
						</li>
						<li>
							Menu 3-2-2
						</li>
						<li>
							Menu 3-2-3
						</li>
					</ul>				
				</li>
				<li>
					Menu 1-3
					<ul class="hidden">
						<li>
							Menu 3-3-1
						</li>
						<li>
							Menu 3-3-2
						</li>
						<li>
							Menu 3-3-3
						</li>
					</ul>
				</li>
			</ul>
		</li>
	</ul>
	
</body>
</html>

bo jeszcze tak pokręconego menu nie robiłem ;) ale ... co tam zrobiłem to dla siebie ;) wkońcu lepsze to niż SPOJ ... no i dla Ciebie.

Teraz wystarczy dodać kolejne podmenu i odpowiednie class'y i jedziesz dalej według przykładów w kodzie

komentarz 26 lutego 2017 przez Karol Loczeski Użytkownik (820 p.)

Wow, jest tu wszystko czego potrzebowałem. Wiem że jest to dość bezużyteczne menu, ale chodzi mi bardziej o naukę i załapania podstaw tworzenia takich menu. Zabieram się za analizę, bo jest co analizować!

Dziękuję !