Drop UP Menu?

[lukinhasb 0]

'Salve galera

 

Já achei diversos "drop down menus" na internet, mas estava precisando de um drop "UP" menu!

 

Achei alguns modelos no google, mas não são do jeito que procuro...

 

Gostaria de adaptar ESTE menu, para um drop UP

 

Seria sensacional se este script que postei acima fosse um drop up, com uma "animação" da janela subindo, ao invés de aparecer de uma vez. Seria perfeito ;]

 

Segue código fonte do script:

 

<div class="wrapper">

   <div class="mainmenu">
       <ul class="menu">
       <li class="list"><a class="category" href="#Home">Home</a></li>
       </ul>
       <ul class="menu">
           <li class="list">
               <a class="category" href="#about">About Us  »</a>
               <ul class="submenu">
                   <li><a href="#about1">About link 1</a></li>
                   <li><a href="#about2">About link 2</a></li>
                   <li><a href="#about3">About link 3</a></li>
                   <li><a href="#about4">About link 4</a></li>
                   <li><a class="endlist" href="#about5">About link 5</a></li>
               </ul>
           </li>
       </ul>
       <ul class="menu">
           <li class="list">
               <a class="category" href="#articles">Articles  »</a>
               <ul class="submenu">
                   <li><a href="#articles1">Articles link 1</a></li>
                   <li><a href="#articles2">Articles link 2</a></li>
                   <li><a href="#articles3">Articles link 3</a></li>
                   <li><a class="endlist" href="#articles4">Articles link 4</a></li>
               </ul>
           </li>
       </ul>
       <ul class="menu">
           <li class="list">
               <a class="category" href="#news">News  »</a>
               <ul class="submenu">
                   <li><a href="#news1">News link 1</a></li>
                   <li><a href="#news2">News link 2</a></li>
                   <li><a class="endlist" href="#news3">News link 3</a></li>
               </ul>
           </li>
       </ul>
       <ul class="menu">
           <li class="list"><a class="category" href="#donate">Donate</a></li>
       </ul>
       <ul class="menu">
           <li class="list"><a class="category" href="#contact">Contact</a></li>
       </ul>
   </div>
</div>

 

body {
font-family: Verdana, Geneva, sans-serif;
font-size: 100%;
color: #666;
background-color: #fff;
margin-left: 20px;
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
}

a, a:hover, a:active, a:focus {
outline:0;
direction:ltr;
}

.wrapper {
position:relative; height:25px;
}

.mainmenu {
position:absolute;
z-index:100;
font-family:Verdana, Geneva, sans-serif;
font-weight:normal;
font-size:90%;
line-height:25px;
left:50%;
margin-left:-303px;
width:606px;
}

ul.menu {
padding:0;
margin:0;
list-style:none;
width:100px;
overflow:hidden;
float:left;
margin-right:1px;
}

ul.menu a {
background:#369;
text-decoration:none;
color:#fff;
padding-left:5px;
}

ul.menu li.list {
float:left;
width:250px;
margin:-32767px -125px 0px 0px;
background:url(images/top1.png) no-repeat left bottom;
}

ul.menu li.list a.category {
position:relative;
z-index:50;
display:block;
float:left;
width:120px;
margin-top:32767px;
background:transparent;
}

ul.menu li.list a.category:hover,
ul.menu li.list a.category:focus,
ul.menu li.list a.category:active {
margin-right:1px;
background-image:url(images/tophover1.png);
background-repeat:no-repeat;
background-position:left top;

}

ul.submenu {
float:left;
padding:25px 0px 0px 0px;
margin:0;
list-style:none;
background-image:url(images/tophover1.png);
background-repeat:no-repeat;
background-position:left top;
margin:-25px 0px 0px 0px;
}

ul.submenu li a {
float:left;
width:120px;
background:#369;
clear:left;
color:#fff;
}

ul.submenu li a.endlist {
background:url(images/bottom1.png);
}

ul.submenu li a.endlist:hover,
ul.submenu li a.endlist:focus,
ul.submenu li a.endlist:active {
background:url(images/bottomhover1.png);
}

ul.submenu a:hover,
ul.submenu a:focus,
ul.submenu a:active {
background:#900;
margin-right:1px;
color:#fff;
}

 

Obrigado!

[Henrique Barcelos 290]

Cara, que valores absurdos de margin são esses?

margin-top:32767px;
/* ... */
margin:-32767px -125px 0px 0px;

Uma vez que os subitens estão posicionados absolutamente, tudo o que você precisa fazer é declarar position:relative em li.list e em li.list ul colocar a propriedade bottom com o valor da altura do menu...