Css 创建导航栏时遇到问题

我试图创建一个小导航栏，即使用户在滚动页面时，它也会停留在页面的特定位置。我是一个彻头彻尾的noob，所以我开始使用css作为我正在使用的模板中的导航按钮。但就我的一生而言，我不知道如何再添加两个按钮。如果这是一个超级问题，我很抱歉，但我真的需要帮助。谢谢大家

网站是www.muzedimage.com 这就是我的想法：

按钮的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。 并根据需要添加/设置尽可能多的按钮

HTML

---

非常感谢。我没有想到这一点，但它是有效的。一个问题是，如何将其捕捉到页面底部而不是顶部？在右边而不是左边？谷歌CSS固定定位，你将了解位置：固定，右边：0px，底部：0px。

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

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