ucinanie elementu przy rozsuwanym menu

pytanie zadane 4 grudnia 2016 w HTML i CSS przez Wilier Bywalec (2,570 p.)

Hej,

proszę niech ktoś rzuci okiem na kod, bo od kilku godzin się męczę.

Efekt jak na zdjęciu. Nie mam pojęcia czemu ucina mi dół elementu <li>, ucieta czesc to padding-bottom. Troche w CSSie jest burdel ale po prostu testuję różne przypadki. Uciecie natepuje w momencie najechania, korzystam z jQuery slideDown

body {
	margin: 0px;
	padding: 0px;
	border: 0px;
}

#container {
	width: 960px;
	margin: 50px auto;
}

ul {
	list-style-type: none;
	padding: 0px;

}


li {
	padding: 20px 0px;
}


#menu{
	height: 40px;
		
}

#menu ul li {
	position: relative;
	display: block;
	text-align: center;
	font-family: Georgia;
	font-weight: bold;
	width: 140px;
}

.podmenu li a{
	color: #fff;
	text-decoration: none;
	display: block;
}

.podmenu ul li ul {
	position: absolute;
	top: 0px;
	left: 140px;
}

.podmenu ul {
	display: none;
}

 li {
	background-color: rgba(0,0,0,0.7);
}

.podmenu li ul li:hover {
	background-color: #ff0000;
	color: #000; 
}

HTML

   <body>
		<div id="container">
			<div id="menu">
				<ul class="podmenu">
					<li><a href="http://jquery.com/">O firmie</a>
						<ul>
							<li><a href="http://jquery.com/">O firmie 1</a></li>
							<li><a href="http://jquery.com/">O firmie 2</a>
								<ul>
									<li><a href="http://jquery.com/">O firmie 21</a></li>
									<li><a href="http://jquery.com/">O firmie 22</a></li>
									<li><a href="http://jquery.com/">O firmie 23</a>
										<ul>
											<li><a href="http://jquery.com/">O firmie 231</a></li>
											<li><a href="http://jquery.com/">O firmie 232</a></li>
											<li><a href="http://jquery.com/">O firmie 233</a></li>
											<li><a href="http://jquery.com/">O firmie 234</a></li>
										</ul>
									</li>
									<li><a href="http://jquery.com/">O firmie 24</a></li>
								</ul>
							</li>
							<li><a href="http://jquery.com/">O firmie 3</a></li>
							<li><a href="http://jquery.com/">O firmie 4</a></li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
    </body>

komentarz 4 grudnia 2016 przez niezalogowany

Wstaw chociaż CSSa, który wysuwa to podmenu poprawnie...

komentarz 4 grudnia 2016 przez Wilier Bywalec (2,570 p.)

jQuery

$(function() {

	$(".podmenu li").hover(
	function() {
		$(this).children("ul").stop().slideDown(500, "easeOutBack");
	},
	function() {
		$(this).children("ul").stop().slideUp("fast", "linear");
	}
	
	);

});

komentarz 4 grudnia 2016 przez niezalogowany

welp

komentarz 4 grudnia 2016 przez Wilier Bywalec (2,570 p.)

nie rozumiem o co Ci chodzi

1 odpowiedź

odpowiedź 4 grudnia 2016 przez niezalogowany

Nic nie ucina - pokazuje podmenu, od razu pod tekstem w przycisku (dokładnie tak, jak jest zapisane w HTMLu). Nadaj wymiary przyciskom lub dodaj do nich margin.

Nie stylizuj po tagach... sam zauważyłeś co się dzieje w CSSie... warto zainteresować się na przykład metodologią BEM
JS jest tu kompletnie niepotrzebny - tym bardziej jQuery

komentarz 4 grudnia 2016 przez Wilier Bywalec (2,570 p.)

tak wiem nie jest potrzebny ale to właśnie jego się uczę i chciałem coś takiego z wykorzystaniem jQuery zrobić, hoverem w CSSie byłoby znacznie prościej

dziękuję juz sobie poradzę