Footer в HTML и CSS

Question

Как сделать это меню колонтитул в HTML и стиль каскадных листы

image

как сделать в каскадных таблицах стилей * ??

<footer> 
    <ul> 
    <li><a href="">Home</a> 
    </li> 
    <li> 
     <a href="">About Us</a> 
     <ul><a href="">Lorem Ipsum</a> 
     </ul> 
     <ul><a href="">Lorem Ipsum</a> 
     </ul> 
     <ul><a href="">Lorem Ipsum</a> 
     </ul> 
     <ul><a href="">Lorem Ipsum</a> 
     </ul> 
    </li> 
    <li> 
     <a href="">Portfolio</a> 
     <ul><a href="">Lorem Ipsum</a> 
     </ul> 
     <ul><a href="">Lorem Ipsum</a> 
     </ul> 
     <ul><a href="">Lorem Ipsum</a> 
     </ul> 
     <ul><a href="">Lorem Ipsum</a> 
     </ul> 
    </li> 
    <li><a href="">Clients</a> 
    </li> 
    <li> 
     <a href="">Events</a> 
     <ul><a href="">Lorem Ipsum</a> 
     </ul> 
     <ul><a href="">Lorem Ipsum</a> 
     </ul> 
     <ul><a href="">Lorem Ipsum</a> 
     </ul> 
    </li> 
    <li> 
     <a href="">Media</a> 
     <ul><a href="">Lorem Ipsum</a> 
     </ul> 
     <ul><a href="">Lorem Ipsum</a> 
     </ul> 
     <ul><a href="">Lorem Ipsum</a> 
     </ul> 
     <ul><a href="">ILorem Ipsum</a> 
     </ul> 
    </li> 
    <li><a href="">Contact Us</a> 
    </li> 
    </ul> 
</footer> 

Answer 1

Вы имеете в виду коснуться, как это? DEMO

Html:

<ul> 
    <li>Home</li> 
    <li>About Us 
     <ul> 
      <li>Lorem Ipsum</li> 
      <li>Lorem Ipsum</li> 
      <li>Lorem Ipsum</li> 
      <li>Lorem Ipsum</li> 
     </ul> 
    </li> 
    <li>Portfolio 
     <ul> 
      <li>Lorem Ipsum</li> 
      <li>Lorem Ipsum</li> 
      <li>Lorem Ipsum</li> 
      <li>Lorem Ipsum</li> 
     </ul> 
    </li> 
    <li>Clients</li> 
    <li>Events 
     <ul> 
      <li>Lorem Ipsum</li> 
      <li>Lorem Ipsum</li> 
      <li>Lorem Ipsum</li> 
     </ul> 
    </li> 
    <li>Media 
     <ul> 
      <li>Lorem Ipsum</li> 
      <li>Lorem Ipsum</li> 
      <li>Lorem Ipsum</li> 
      <li>ILorem Ipsum</li> 
     </ul> 
    </li> 
    <li>Contact Us</li> 
</ul> 

Css:

body{width:100%;} 
ul {width:100%; list-style:none;} 
ul li {float:left; width:150px; font-weight:bold;} 
ul li ul {padding:0;} 
ul li ul li {float:none; padding:5px 0; font-weight:normal;} 

http://jsfiddle.net/wdz68kxk/

Answer 2

вы можете попробовать это:

#menu { 
    position: absolute; 
    bottom: 0; 
}