难以创建导航栏

Question

我正在尝试创建小型导航栏，该导航栏即使用户滚动浏览它也将保持在页面的某些位置。我是一个总的菜鸟，所以我开始使用CSS作为正在使用的模板中的导航按钮。但是对于我的一生，我不知道如何添加两个按钮。很抱歉，如果这是一个超级发音问题，但是我真的可以使用帮助。谢谢大家！

网站是www.muzedimage.com这就是我的想法：https：//i.stack.imgur.com/bv4rh.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>