Css 对齐垂直菜单底部的图像

我目前正在为与我一起唱歌的乐队重新制作一个网站。我找到了一个垂直菜单。现在我要公开地说，菜单只是我发现的东西，所以它的编码以及CSS不是我的。我已经调整了一些东西，使它们适合我想要的。我试图在菜单的最底部有一系列的小图片。我想让他们留在底部，不管桌面有多大。如果你们能给我任何帮助，我将不胜感激

www.spoken4quartle.com/test/index.html是我正在开发的网站

#menu {
border-left: 3px solid #831111;
border-right: 3px solid #831111;
background: rgba(0, 0, 0, 0.75);
float: left;
font-size: 1.5em;
height: 100%;
margin-left: 1em;

}

}

}

}

上面是CSS。下面是HTML

    <div id="menu">
<ul>
<li>
    <a href="#">Home</a>
</li>
<li>
    <a href="#">About Us</a>
    <ul>
        <li>
            <a href="#">Spoken 4</a>
        </li>
        <li>
            <a href="#">Jon Charles</a>
        </li>
        <li>
            <a href="#">Cecil</a>
        </li>
        <li>
            <a href="#">Brandon</a>
        </li>
        <li>
            <a href="#">Steven</a>
        </li>
    </ul>
</li>
<li>
    <a href="#">Schedule</a>
</li>
<li>
    <a href="#">Store</a>
</li>
<li>
    <a href="#">Media</a>
    <ul>
        <li>
            <a href="#">Photos</a>
        </li>
        <li>
            <a href="#">Videos</a>
        </li>
        <li>
            <a href="#">Audio</a>
        </li>
    </ul>
</li>
    <li>
    <a href="#">Promotion</a>
    </li>
<li>
    <li>
    <a href="#">Contact</a>
    </li>
</li>
</ul>
<div id="menu_contact">
<a href="https://www.facebook.com/Spoken4Quartet"><img src="images/facebook.png" ></a>
<a href="https://www.twitter.com/Spoken4Quartet"><img src="images/twitter.png" ></a>
<a href="mailto:spoken4quartet@gmail.com"><img src="images/email.png" ></a>
</div>
</div>

以下是我所做的：

并添加了以下CSS：

#menu_contact {
position:absolute;
bottom:0;
width:100%;
}

#menu {
position:relative;
}

#menu_contact a, #menu_contact a img {
width:30%;
}

---

工作得很好！非常感谢。

#menu li a {
display: block;
padding: 0.5em 1em;
white-space: nowrap;

#menu li ul {
    position: absolute;
    overflow: hidden;
    display: none;
    left: 100%;
    top: 0.5em;
    float: none;
    background-image: -moz-radial-gradient(0 50%, ellipse  farthest-side, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0) 100%);
    background-image: -webkit-radial-gradient(0 50%, ellipse  farthest-side, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0) 100%);
    background-image: radial-gradient(0 50%, ellipse  farthest-side, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0) 100%);
}

#menu li:hover ul {
    display: block;
}

#menu li ul a {
    position: relative;
    font-size: 0.8em;
}

#menu li ul a:hover:before {
    content: "";
    display: block;
    width: 1em;
    height: 1em;
    background: rgba(0,0,0,0.75);
    border: 1px solid #831111;
    position: absolute;
    top: 0.5em;
    left: -0.75em;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}`

    <div id="menu">
<ul>
<li>
    <a href="#">Home</a>
</li>
<li>
    <a href="#">About Us</a>
    <ul>
        <li>
            <a href="#">Spoken 4</a>
        </li>
        <li>
            <a href="#">Jon Charles</a>
        </li>
        <li>
            <a href="#">Cecil</a>
        </li>
        <li>
            <a href="#">Brandon</a>
        </li>
        <li>
            <a href="#">Steven</a>
        </li>
    </ul>
</li>
<li>
    <a href="#">Schedule</a>
</li>
<li>
    <a href="#">Store</a>
</li>
<li>
    <a href="#">Media</a>
    <ul>
        <li>
            <a href="#">Photos</a>
        </li>
        <li>
            <a href="#">Videos</a>
        </li>
        <li>
            <a href="#">Audio</a>
        </li>
    </ul>
</li>
    <li>
    <a href="#">Promotion</a>
    </li>
<li>
    <li>
    <a href="#">Contact</a>
    </li>
</li>
</ul>
<div id="menu_contact">
<a href="https://www.facebook.com/Spoken4Quartet"><img src="images/facebook.png" ></a>
<a href="https://www.twitter.com/Spoken4Quartet"><img src="images/twitter.png" ></a>
<a href="mailto:spoken4quartet@gmail.com"><img src="images/email.png" ></a>
</div>
</div>

#menu_contact {
position:absolute;
bottom:0;
width:100%;
}

#menu {
position:relative;
}

#menu_contact a, #menu_contact a img {
width:30%;
}