세로 메뉴 하단의 이미지 정렬

Question

현재 내가 노래하는 그룹의 웹 사이트를 다시 작성 중입니다. 내가 찾은 수직 메뉴가 있습니다. 이제는 공개적으로 메뉴가 내가 발견 한 것 뿐이라고 말하여 CSS뿐만 아니라 CSS도 내 것이 아닙니다. 나는 그들이 원하는 것에 맞게 몇 가지를 조정했다. 나는 메뉴의 맨 아래에 일련의 작은 이미지들을 갖고 싶어한다. 누군가가 가지고있는 데스크탑의 크기에 상관없이 바닥에 머물러 있기를 바랍니다. 너희들이 나에게 줄 수있는 어떤 도움이라도 인정 될 것이다.

www.spoken4quartet.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; 

}

#menu_contact { 
vertical-align:bottom; 

}

#menu li { 
position: relative; 
z-index: 1; 

}

#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); 
}` 

,

위의 CSS가 있습니다.

다음과 같은 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> 

Answer 1

입니다

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

#menu { 
position:relative; 
} 

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