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

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

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