04-08-2009, 16:25
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>