+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: [css] rozwijane menu (/thread-css-rozwijane-menu)
[css] rozwijane menu - neoprzemek - 04-08-2009
Witam mam zrobione rozwijane menu w dół przy pomocy CSS. Chciałbym przerobić ten kod tak by to menu rozwijało się w górę jak to zrobić??
Kod:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Rozwijane menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
* {
padding: 0;
margin: 0
}
body {
behavior:url("csshover2.htc");
margin-left: 20px;
background: #FFFF97
}
#menu {
position: absolute;
list-style-type: none;
}
#menu ul {
list-style-type: none;
}
#menu li {
float: left
}
#menu li a {
display: block;
width: 150px;
text-align: center;
background: #E6E7E8;
color: #656E75;
padding: 3px 0;
text-decoration: underline
}
#menu li a:hover {
background: #CDCECF;
color: #383D41;
text-decoration: none
}
#menu li li {
float: none
}
#menu li ul {
position: absolute;
height: 1px;
overflow:hidden
}
#menu li:hover ul {
height:200px
}
#one {
left: 0
}
#two {
left: 150px;
}
#three {
left:300px;
}
#four {
left:450px;
}
#five {
left:600px
}
.przerwa {
height: 30px;
}
p {
width: 800px
}
</style>
</head>
<body>
<h1>Rozwijane menu</h1>
<ul id="menu">
<li><a href="">Jeden</a>
<ul class="one">
<li><a href="">Jeden-jeden</a></li>
<li><a href="">Jeden-dwa</a></li>
<li><a href="">Jeden-trzy</a></li>
<li><a href="">Jeden-cztery</a></li>
<li><a href="">Jeden-pięć</a></li>
</ul>
</li>
<li><a href="">Dwa</a>
<ul class="two">
<li><a href="">Dwa-jeden</a></li>
<li><a href="">Dwa-dwa</a></li>
<li><a href="">Dwa-trzy</a></li>
<li><a href="">Dwa-cztery</a></li>
<li><a href="">Dwa-pięć</a></li>
</ul>
</li>
<li><a href="">Trzy</a>
<ul class="three">
<li><a href="">Trzy-jeden</a></li>
<li><a href="">Trzy-dwa</a></li>
<li><a href="">Trzy-trzy</a></li>
<li><a href="">Trzy-cztery</a></li>
<li><a href="">Trzy-pięć</a></li>
</ul>
</li>
<li><a href="">Cztery</a>
<ul class="four">
<li><a href="">Cztery-jeden</a></li>
<li><a href="">Cztery-dwa</a></li>
<li><a href="">Cztery-trzy</a></li>
<li><a href="">Cztery-cztery</a></li>
<li><a href="">Cztery-pięć</a></li>
</ul>
</li>
<li><a href="">Pięć</a>
<ul class="five">
<li><a href="">Pięć-jeden</a></li>
<li><a href="">Pięć-dwa</a></li>
<li><a href="">Pięć-trzy</a></li>
<li><a href="">Pięć-cztery</a></li>
<li><a href="">Pięć-pięć</a></li>
</ul>
</li>
</ul>
<div class="przerwa"></div>
</body>
</html>RE: [css] rozwijane menu - Kartofelek - 10-08-2009
Zmień trochę działanie tego skryptu:
nie ustawiaj temu menu height:1px (skąd taka dziwna metoda???)
potem ustaw glownym LI position:relative; a podrzednym UL position:absolute i bottom:[wysokosc li] px
Powinno dzialac ^^