Drop-UP Navigation Menu?

Hey Guys,

I'm working on a site that uses a dropdown menu in its main navigation across the top of the page. Implementing it was no problem.

However, I'd like to have a similar effect in the footer - except instead of the menu dropping downwards (and off the page) I'd like it to slide upwards. Each item contains different amounts of li's and therefor is different in length.

Any idea how to go about doing this?

Thanks.

Here's the menu itself:

<div id="footer">
<!-- Drop down navigation -->
<div id="navigation">
<ul>
<li><a class="home"></a></li>

<li><a class="resources"></a>
<ul>
<li><a href="#">Current Message</a></li>
<li><a href="#">Message Archive</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Prayer Request</a></li>
<li><a href="#">Newsletters</a></li>
<li><a href="#">Weekly Bulletin</a></li>
<li><a href="#">Links &amp; Apps</a></li>
</ul>
</li>

<li><a class="giving"></a></li>

<li><a class="events"></a>
<ul>
<li><a href="#">Upcoming Events</a></li>
<li><a href="#">Event Photos</a></li>
<li><a href="#">Event Registration</a></li>
<li><a href="#">Event FAQ</a></li>
</ul>
</li>

<li><a class="grow"></a>
<ul>
<li><a href="#">Journey Groups</a></li>
<li><a href="#">Connect</a></li>
<li><a href="#">Serve</a></li>
<li><a href="#">Prayer Requests</a></li>
</ul>
</li>

<li><a class="closer_look"></a>
<ul>
<li><a href="#">What to Expect</a></li>
<li><a href="#">Worship</a></li>
<li><a href="#">Share</a></li>
<li><a href="#">Our Pastor</a></li>
<li><a href="#">Our Staff</a></li>
<li><a href="#">Get Directions</a></li>
</ul>
</li>
</ul>
</div><!-- End navigation -->
</div><!-- End Footer -->

And here's the basic css:
#navigation ul { float:right; margin:0; padding:0 50px 0 0; list-style-type:none; text-align:center; }
#navigation ul li { display:inline-block; padding:0; position:relative; margin:0 5px; float:right; }
#navigation ul li a { display:block; height:42px; }
#navigation ul li h3 { line-height:1em; margin:20px 0 0 0; }
#navigation ul li ul { position:absolute; z-index:10; display:none; background:none; margin:0; padding:0; float:left; }
#navigation ul li:hover ul { display: block; }
#navigation ul li ul li { z-index:10; position:relative; display:block; text-align:left; margin:0 0 0 -30px; }
#navigation ul li ul li a { display:block; height:20px; width:125px; background:#fff; padding:5px 30px 5px 30px; background:url('images/header_nav_dropbg.png'); }
#navigation ul li ul li a:hover { border-bottom:solid thin #78A22F; border-top:solid thin #78A22F; text-decoration:none; margin:-2px 0 0; padding:6px 30px 4px 30px; color:#333; }
/* Fix IE. Hide from IE Mac \*/ * html ul li { float: left; height: 1%; } * html ul li a { height: 1%; }

/* Mouseover Effects */
#navigation ul li a.closer_look { background:url('images/nav_closerlook.png'); width:118px; } #navigation ul li a.closer_look:hover { background:url('images/nav_closerlook_over.png'); }
#navigation ul li a.grow { background:url('images/nav_grow.png'); width:58px; } #navigation ul li a.grow:hover { background:url('images/nav_grow_over.png'); }
#navigation ul li a.events { background:url('images/nav_events.png'); width:74px; } #navigation ul li a.events:hover { background:url('images/nav_events_over.png'); }
#navigation ul li a.giving { background:url('images/nav_giving.png'); width:74px; } #navigation ul li a.giving:hover { background:url('images/nav_giving_over.png'); }
#navigation ul li a.resources { background:url('images/nav_resources.png'); width:103px; } #navigation ul li a.resources:hover { background:url('images/nav_resources_over.png'); }

Position the drop down menu in a footer division at the bottom.



-----

Are you building the pages server-side? what you may be able to do (I am thinking on the hoof), is to make sure that each flyout has the same number of li's even if some are blank. then, you could position the flyout parts absolutely, to be the same distance above the parent LI and they would look like they run up from it. OR, perhaps, you could give each sub LI a class and give each class a specific absolute position to try to achive the same effect.

hth

bazz

Try
#navigation ul li ul { position:absolute; z-index:10; display:none;
background:none; margin:0; padding:0; float:none; bottom:2em; }

Thanks abduraooft, that works for me. Ended up having to tweak its positioning etc but overall - great fix.