Question

如何在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>

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

html和css中的页脚菜单

2 个答案: