如何在div中放置垂直導航欄？

Question

我有一個高度為300px的div。 我正在嘗試在div內構建垂直導航欄。 我想將每個li平均分配以適合div。 我使用height = auto，但是不起作用。 我閱讀了一些文章，他們建議將高度除以我擁有的鏈接數量。 我不知道這是否是正確的解決方案。 誰能幫忙嗎？？？

<div id="menu"> <!--Menus starts here-->
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Stuff1</a></li>
                        <li><a href="#">Stuff2</a></li>
                        <li><a href="#">Stuff3</a></li>
                        <li><a href="#">Stuff4</a></li>
                    </ul>
                </div> <!--End of verrical menu here-->


/*the menu starts here*/
#menu{
    background-color: yellow;
    max-width: 100%;
    height: 300px;
    margin: 0 auto;


}
#menu ul{
    width: 95%;
    height: 300px;
    background-color: purple;
    display: block;
    margin: 0;
    padding: 0;

}

#menu li{
list-style: none;
display: block;
width: 100%;
height: auto;

color:#fffafa;
font-family: helvetica;
font-size: 20px;
padding: 20px;
text-align: center;
border:2px solid black;
}

#menu li:hover{
    background-color: #ff4500;
    width: 90%;
}

#menu li{
    -webkit-transition:all .9s ease;
    -moz-transition:all .9s ease;
    -ms-transition:all .9s ease;
    transition:all .9s ease;
} /*end of the menu goes here*/

Answer 1

如果使用5個項目，則應手動設置li的高度。

li {
height: 20%;
}

Answer 2

如果您想在ul中添加更多li標簽，這是jquery，菜單將保持300px或您可以更改菜單高度。 在這里您可以看到： http : //jsfiddle.net/j3TU3/

$(document).ready(function(){
    var a=+$("#menu").height();
    var c=$("li").length;
    var aa=(a/c)-4;
    $("li").css({"height":aa});
});