创建导航栏时出错

Question

我正在尝试创建一个小的导航栏，它将停留在页面的特定位置，即使用户正在滚动它。我完全是个菜鸟，所以我从我使用的模板开始使用css作为导航按钮。但在我的生活中，我想不出怎么再加两个按钮。如果这是个超新星的问题，我很抱歉，但我真的需要帮助。谢谢你们！

这个网站是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

这里有一个小小的小提琴，可以给您一个开始。

花时间玩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>