suckerfishメニューの方向を逆にする方法（ドロップダウン）

Question

私はページの一番上ではなく、一番下にナビゲーションバーを持っています。私は "ドロップアップ"サッカーフィッシュメニューを実装しようとしています。私は可能な限り小さなJavaScriptでそれをやりたい私の現在のコードは以下の通りで、ドロップダウンメニューとしてうまく機能します。それを逆転させる方法はありますか？すべてのヘルプは高く評価され

<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> 

：

は、ここに私のコードです。ありがとう！

Answer 1

<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> 

コードは最初のオーバートップの二次メニューを配置するために働いたことの追加JS