Html 如何停止活动菜单项在选择时拖动整个数组

我有一个专为移动屏幕设计的菜单栏

我正在尝试格式化它，这样当你“点击”一个图像时，它会下降3个像素来表示它的选择——但是我使用的代码会下降整个图像栏

代码如下：

#menubar {
  position: absolute;
  top: 15px;
  left: 10px;
  height: 30px;
  padding: 5px;
  margin: 0;
}
.touch_nav {
  display: inline;
  margin: 0;
  min-width: 80px;
  min-height: 80px;
  color: #fff;
}
.touch_nav:active {
  margin-top: 5px;
}
#navhome {
  background: url('./img/mobile/homebutton.png')
}
#navabout {
  background: url('./img/mobile/aboutbutton.png')
}
#navservices {
  background: url('./img/mobile/servicesbutton.png')
}
#navdownload {
  background: url('./img/mobile/downloadbutton.png')
}
#navenquiry {
  background: url('./img/mobile/enquirybutton.png')
}

谁能告诉我我做错了什么

.touch_nav:active { 
    position:relative;
    top: 5px;
}

这将使元件相对于其当前位置进行定位，而不会影响任何其他元件

这将使元件相对于其当前位置进行定位，而不会影响任何其他元件