css - 无法创建导航栏

Question

我正在尝试创建一个小导航栏，即使用户正在滚动它，它也会停留在页面的特定位置。我是个菜鸟，所以我开始使用 css 作为我正在使用的模板中的导航按钮。但是对于我的生活，我无法弄清楚如何再添加两个按钮。如果这是一个 super 菜鸟问题，我很抱歉，但我真的需要帮助。谢谢大家!

网站是 www.muzedimage.com 这就是我的想法:http://i.imgur.com/oN6osxv.jpg

按钮的 HTML 片段是:

<div class="downArrow"> 
   <div class="row">
      <div class="large-1 small-2 column push-11"> 
         <a href="#whatwedo" class="scroll down"><i class="icon-chevron-down"></i></a>
      </div>
   </div>
</div>

CSS 样式表:

section.banner {
  float: left;
  width: 100%;
  position: relative;
  overflow: hidden;
}
section.banner .downArrow {
    float: right;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 100;
    text-align: center;
}
section.banner .downArrow a.down {
    float: left;
    width: 50%;
    height: 60px;
    background: #cb7039;
    text-align: center;
}
section.banner .downArrow a.down i {
  color: white;
  font-size: 1.688em;
  line-height: 60px;
  -webkit-transition: line-height 0.1s ease-in;
  -moz-transition: line-height 0.1s ease-in;
  -o-transition: line-height 0.1s ease-in;
  transition: line-height 0.1s ease-in;
}
section.banner .downArrow a.down:hover i {
  line-height: 80px;
}

Answer 1

这里有点FIDDLE这可以给你一个开始。

花时间玩弄 CSS。 并根据需要添加/设计任意数量的按钮。

HTML

<div class='holder'>
    <div class='button1'>X</div>
    <div class='button1'>Y</div>
    <div class='button1'>W</div>
    <div class='button1'>Z</div>
</div>