Making Movable Menu Items In Html

Making movable menu items in html, I have four menu items arranged in right corner of my site vertically one below the other like Home Services Contact About Now i need On click

Solution 1:

Here is how you could have the options jump straight to the top when you click them:

$(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