html和css中的页脚菜单[关闭]答案

【问题标题】：Footer menu in html and css [closed]html和css中的页脚菜单[关闭]
【发布时间】：2014-11-19 01:04:39
【问题描述】：

如何在 HTML 和级联样式表中制作此菜单页脚

如何制作级联样式表*??

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

【问题讨论】：

做一个页脚并将html链接放在那里。完成。

标签： html css menu

【解决方案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/

【讨论】：

【解决方案2】：

你可以试试这个：

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

【讨论】：

你能解释一下这段代码是如何回答这个问题的吗？