html - 导航位于底部，需要内部列表显示在导航上方而不是导航下方吗？

Question

下面是我的带有子列表的导航的 HTML 代码。子列表向下下降，我希望它们向上打开，因为导航位于页面底部，我该怎么做？

我在这里设置了一个 fiddle http://jsfiddle.net/rabelais/b58Yj/1/

<ul id="nav">
<li>
    <a id="lfw-link" href="london-fashion-week.html">
        Live at London Fashion Week
    </a>
    <nav id="lfw-nav">
        <a href="london-fashion-week.html">
            SEE ALL
        </a>
        <a href="lee-roach.html">
  Lee Roach
        </a> <a href="xander-zhou.html">Xander Zhou</a>
        <a href="vivienne-westwood-2013.html">
            Vivienne Westwood 2013
        </a>
        <a href="paul-smith.html">
            Paul smith
        </a>
        <a href="house-of-holland.html">
            House of Holland
        </a>
        <a href="roksanda.html">
            Roksanda
        </a>
        <a href="julien-mcdonald.html">
            Julien Mcdonald
        </a>
        <a href="vivienne-westwood-2012.html">
            Vivienne Westwood 2012
        </a>
        <a href="2012-lfw.html">
            London Fashion Week 2012
        </a>
    </nav>

</li>
<li>
    <a id="clients-link" href="clients.html">
        Clients
    </a>
    <nav id="clients-nav">
        <a href="clients.html">
            SEE ALL
        </a>
        <a href="yoga-project.html">
        Yoga Project
        </a>
        <a href="edward-sharpe.html">
            Edward Sharpe and the magnetic zeros
        </a>
        <a href="tank-magazine.html">
            Tank Magazine
        </a>
        <a href="volt-magazine.html">
            Volt Magazine
        </a>
        <a href="poplin.html">
            Poplin
        </a>
        <a href="dash-magazine.html">
            Dash Magazine
        </a>
        <a href="tank-o-magazine.html">
            O Tank Magazine
        </a>
        <a href="grit-magazine.html">
            Grit Magazine
        </a>
        <a href="gieves-and-hawkes.html">
            Gieves and Hawkes
        </a>
    </nav>
</li>
<li>
    <a id="personal-link" href="personal.html">
        Personal Projects
    </a>
    <nav id="personal-nav">
        <a href="personal.html">
            SEE ALL
        </a>
        <a href="other-drawings.html">
            Other Drawings
        </a>
        <a href="head-in-the-clouds.html">
            Head in the Clouds
        </a>
        <a href="restless.html">
            Restless
        </a>
        <a href="acne-sample-lookbook.html">
            Acne Sample LookBook
        </a>
        <a href="men-interupted.html">
            Men Interupted
        </a>
    </nav>
</li>
<li>
    <a id="video-link" href="tank-magazine-stop-motion.html">
        Video
    </a>
    <nav id="video-nav">

        <a href="tank-magazine-stop-motion.html">
            Tao Lin Interview Tank Magazine
        </a>
    </nav>
</li>
<li>
    <a href="about.html">
        About
    </a>
</li>
<li>
    <a href="contact.html">
        Contact
    </a>
</li>

Answer 1

添加

    position:absolute;
    bottom:18px; 
    left:0;

到#nav>li:hover>nav

JSFiddle Demo

这样子菜单从底部->向上打开