用html制作可移动的菜单项

Question

在html中制作可移动的菜单项， 我的网站右下角有四个菜单项垂直排列在另一个之下，如

Home
Services
Contact 
About

现在我需要点击第二个元素（服务）第二个元素已经到了顶部并且第一个元素（home）必须向下推，类似地点击第三个元素必须到达顶部并且首先必须向下推。 任何帮助和任何参考链接谢谢？

Answer 1

以下是单击它们时如何将选项直接跳到顶部的方法：

$(function() {
  $('#menu').on('click', 'li', function(event) {
    $(event.target).prependTo('#menu');
  });
});

ul {
  padding: 0;
}
li {
  display: block;
  list-style-type: none;
  height: 30px;
  line-height: 30px;
  color: darkblue;
  font-family: sans-serif;
  background-color: #ddd;
  padding-left: 10px;
  margin: 5px 10px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
  <li>Home</li>
  <li>Services</li>
  <li>Contact</li>
  <li>About</li>
</ul>

jsFiddle link