<div class="scrollmenu">

  <a href="#home">Home</a>

  <a href="#news">News</a>

  <a href="#contact">Contact</a>

  <a href="#about">About</a>

  <a href="#support">Support</a>

  <a href="#blog">Blog</a>

  <a href="#tools">Tools</a>  

  <a href="#base">Base</a>

  <a href="#custom">Custom</a>

  <a href="#more">More</a>

  <a href="#logo">Logo</a>

  <a href="#friends">Friends</a>

  <a href="#partners">Partners</a>

  <a href="#people">People</a>

  <a href="#work">Work</a>

</div>

​

<h2>水平滚动菜单</h2>

<p>重置浏览器查看效果</p>

div.scrollmenu {

    background-color: #333;

    overflow: auto;

    white-space: nowrap;

}

​

div.scrollmenu a {

    display: inline-block;

    color: white;

    text-align: center;

    padding: 14px;

    text-decoration: none;

}

​

div.scrollmenu a:hover {

    background-color: #777;

}