Convert Menu to Dropdown in jquery

-------------------------------------------------
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
// DOM ready
$(function() {
      // Create the dropdown base
      $("<select />").appendTo("nav");
      // Create default option "Go to..."
      $("<option />", {
         "selected": "selected",
         "value"   : "",
         "text"    : "Go to..."
      }).appendTo("nav select");
      // Populate dropdown with menu items
      $("nav a").each(function() {
       var el = $(this);
       $("<option />", {
           "value"   : el.attr("href"),
           "text"    : el.text()
       }).appendTo("nav select");
      });
  // To make dropdown actually work
  // To make more unobtrusive: http://css-tricks.com/4064-unobtrusive-page-changer/
      $("nav select").change(function() {
        window.location = $(this).find("option:selected").val();
      });
});
</script>


<style>
  nav {
      display: block;
      width: 960px;
      margin: 100px auto;
      text-align: center;
    }
    nav ul {
      list-style: none;
    }
    nav li {
      display: inline-block;
    }
    nav a {
      display: inline-block;
      background: #333;
      color: white;
      padding: 5px 15px;
      border: 1px solid white;
      text-decoration: none;
    }
    nav a:hover {
      border: 1px solid red;
      background: red;
    }
    nav a:active {
      background: blue;
    }
    nav select {
      display: none;
    }
    @media (max-width: 960px) {
      nav ul     { display: none; }
      nav select { display: inline-block; }
    }
</style>



<nav>
    <h1>This menu turns into a &lt;select> when window is less than 960px to conserve space.</h1>
  <ul>
  <li><a href="#" class="active">Home</a></li>
  <li><a href="#books">Books</a></li>
  <li><a href="#blog">Blog</a></li>
  <li><a href="#about">About Us</a></li>
  <li><a href="#support">Support</a></li>
    </ul>
  </nav>

-------------------------------------------------