Wątek przeniesiony 2015-01-08 21:37 z Webmastering przez dzek69.

Rozwijane menu przesuwa stronę zamiast wyświetlić się nad innymi elementami

0

Witam wszystkich serdecznie. Mam pewnie problem, pewnie dla wyjadaczy jest on banalny, i zapewne ja jako nowicjusz popełniłem gdzieś karygodny błąd :) Do rzeczy. Podczas rozwijania menu, rozwijane menu przesuwa mi całą stronę w dół. A chciał bym żeby nachodziła na baner i zakrywało go (rozwijane menu) a niestety przesuwa mi całą stronę w dół. Prośba o pomoc, wskazówkę :)

<html> 
<body>
	<div id="container">
		<nav id="mainmenu">
			<ul>
				<li><a href="#">HOME</a></li>
				<li>
					<a href="#">W GÓRY &#9662</a>
						<ul>
							<li><a href="#">TATRY</a></li>
							<li><a href="#">KARKONOSZE</a></li>
							<li><a href="#">BESKIDY</a></li>
						</ul>
				</li>
				<li>
				<a href="#">W MIASTO &#9662</a>
				<ul>
					<li><a href="#">SZCZECIN</a></li>
				</ul>
			</li>
			<li><a href="#">ZA MIASTO</a></li>
			<li><a href="#">O PROJEKCIE</a></li>
			<li><a href="#">KONTAKT</a></li>
			</ul>

		</nav>
</html>

<style> // css menu 
#mainmenu{
	width: 1000px;
	height: 10px;
	
}
#mainmenu ul{
	padding: 0;
	list-style: none;
	
}
#mainmenu ul li{
	float: left;
	width: 166px;
	text-align: center;
	line-height: 10px;
}
#mainmenu ul li a{
	display: block;
	padding: 10px;
	color: white;
	background: #25292C;
	text-decoration: none;
	
}
#mainmenu ul li a:hover{
	color: #fff;
	background: #939393;
}
#mainmenu ul li ul{
	display: none;
}
#mainmenu ul li:hover ul{
	display: block;
}
</style>

<style>
body{
	background-color: #E9EAED;
	font-family: 'Montserrat', sans-serif;
}
#container{
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
	
}

#topbar{
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
}
</style>
0

Poczytaj o position: relative; i position: absolute;

1 użytkowników online, w tym zalogowanych: 0, gości: 1