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

下面是我的带有子列表的导航HTML代码。子列表向下下拉，我希望它们向上打开，因为导航位于页面底部，我如何才能做到这一点

我在这里竖起了一把小提琴

添加

至

#nav>li:悬停>导航

---

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

您可以在这里检查这个jsfiddle，检查代码，您将得到您需要的

---

}

底部：100%

会更好，因为它与像素无关。

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

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

#nav:hover ul li:hover ul {
position: absolute;
margin-top: 1px;
font: 10px;
bottom: 100%;