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

Question

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

我正在尝试对其进行格式化，以便当您“点击”图像时，它会下降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')
}

谁能告诉我我做错了什么？

Answer 1

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

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