How to reverse the direction of a suckerfish menu (drop-up)

Question

I have a navigation bar at the bottom of my page rather than at the top. I am trying to implement a "drop-up" suckerfish menu. I want to do it with as little javascript as possible. My current code is as follows and works fine as a drop-down menu. Is there a way to reverse it?

Here is my code:

<style type="text/css">
   #nav, #nav ul {
   padding: 0;
   margin: 0;
   list-style: none;
   }

   #nav a {
   display: block;
   width: 10em;
   }

   #nav li {
   float: left;
   width: 10em;
   background: #000000;
   }

   #nav li ul {
   position: absolute;
   left: -999em;
   }

   #nav li: hover ul {
   left: auto;
   }

   #nav li:hover ul, #nav li.sfhover ul {
   left: auto;
   }

   </style>
   <script type="text/javascript">
   sfHover = function() {
   var sfEls = document.getElementById("nav").getElementsByTagName("LI");
   for (var i=0; i<sfEls.length; i++) {
   sfEls[i].onmouseover=function() {
   this.className+=" sfhover";
   }
   sfEls[i].onmouseout=function() {
   this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
   }
   }
   }
   if (window.attachEvent) window.attachEvent("onload", sfHover);
   </script>


   <ul id="nav">
   <li><a href="#">Home</a></li>

   <li><a href="#">About Us</a>
   <ul>
   <li><a href="#">Who We Are</a></li>
   <li><a href="#">What We Believe</a></li>
   <li><a href="#">Our Pastors</a></li>
   </ul>
   </li>

   <li><a href="#">Ministries</a>
   <ul>
   <li><a href="#">Victory Kids (VC3)</a></li>
   <li><a href="#">Victory Youth</a></li>
   <li><a href="#">Connect Groups</a></li>
   <li><a href="#">S.O.A.P</a></li>
   <li><a href="#">Victory Group</a></li>
   </ul>
   </li>

   <li><a href="#">Connect</a>
   <ul>
   <li><a href="#">Contact Us</a></li>
   <li><a href="#">Social Networks</a></li>
   <li><a href="#">Blogs</a></li>
   </ul>
   </li>

   <li><a href="#">Media</a>
   <ul>
   <li><a href="#">Sermon Podcasts</a></li>
   <li><a href="#">Videos</a></li>
   <li><a href="#">Images</a></li>
   </ul>
   </li>

   <li><a href="#">Giving</a>
   <ul>
   <li><a href="#">Help Support</a></li>
   <li><a href="#">Ministries We Support</a></li>
   <li><a href="#">2011 Financial Report</a></li>
   </ul>
   </li>

   <li><a href="#">Resources</a></li>

   </ul>

All help is appreciated. Thanks!

score 2 · Accepted Answer · answered Mar 09 '12 at 19:00

<style type="text/css">
   #nav, #nav ul {
   padding: 0;
   margin: 0;
   list-style: none;     
   bottom:0px;
   position:absolute;
   }

   #nav a {
   display: block;
   width: 10em;
   }

   #nav li {
   float: left;
   width: 10em;
   background: #000000;
   }

   #nav li ul {
   position: absolute;
   left: -999em;
   bottom:20px;
   }

   #nav li: hover ul {
   left: auto;
   }

   #nav li:hover ul, #nav li.sfhover ul {
   left: auto;
   }

   </style>
   <script type="text/javascript">
   sfHover = function() {
   var sfEls = document.getElementById("nav").getElementsByTagName("LI");
   for (var i=0; i<sfEls.length; i++) {
   sfEls[i].onmouseover=function() {
   this.className+=" sfhover";
   }
   sfEls[i].onmouseout=function() {
   this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
   }
   }
   }
   if (window.attachEvent) window.attachEvent("onload", sfHover);
   </script>


   <ul id="nav">
   <li><a href="#">Home</a></li>

   <li><a href="#">About Us</a>
   <ul>
   <li><a href="#">Who We Are</a></li>
   <li><a href="#">What We Believe</a></li>
   <li><a href="#">Our Pastors</a></li>
   </ul>
   </li>

   <li><a href="#">Ministries</a>
   <ul>
   <li><a href="#">Victory Kids (VC3)</a></li>
   <li><a href="#">Victory Youth</a></li>
   <li><a href="#">Connect Groups</a></li>
   <li><a href="#">S.O.A.P</a></li>
   <li><a href="#">Victory Group</a></li>
   </ul>
   </li>

   <li><a href="#">Connect</a>
   <ul>
   <li><a href="#">Contact Us</a></li>
   <li><a href="#">Social Networks</a></li>
   <li><a href="#">Blogs</a></li>
   </ul>
   </li>

   <li><a href="#">Media</a>
   <ul>
   <li><a href="#">Sermon Podcasts</a></li>
   <li><a href="#">Videos</a></li>
   <li><a href="#">Images</a></li>
   </ul>
   </li>

   <li><a href="#">Giving</a>
   <ul>
   <li><a href="#">Help Support</a></li>
   <li><a href="#">Ministries We Support</a></li>
   <li><a href="#">2011 Financial Report</a></li>
   </ul>
   </li>

   <li><a href="#">Resources</a></li>

   </ul>

Try this without additional JS

That code worked to place the secondary menus overtop of the first however, they are not vertical, they are horizontal. Is there a way to get it to where the second level menu will be a vertical column of links? — Josiah Palmer, Mar 09 '12 at 19:17
the code `#nav li` is causing the secondary list to float. Change it to `#nav > li` to apply only to the first child. — jmbertucci, Mar 09 '12 at 19:26

How to reverse the direction of a suckerfish menu (drop-up)

1 Answers1