Simple Drop Down Menu Help

* {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

body {
    background: #fff;
}

#menu {
    background: #384047;
    height: 60px;
    padding: 0 5px 0;
    text-align: center;
}

ul {
    list-style: none;
}

ul li {
    display: inline-block;
    width: 84px;
    text-align: center;
}

ul li a {
    color: #fff;
    width: 100%;
    line-height: 60px;
    text-decoration: none;
}

ul li.selected {
    background: #fff;
}

ul li.selected a {
    color: #384047;
}

select {
    width: 94%;
    margin: 11px  0 11px 2%;
    float: left;
}

h1 {
    margin: 40px 0 10px;
    text-align: center;
    color: #384047;
}
p {
    text-align: center;
    color: #777;
}
/** Start Coding Here **/

/**
Modify CSS to hide links on small width and show button and select
Also hides select and button on larger width and show's links
**/

@media (min-width: 320px) and (max-width: 568px) {
  #menu ul {
    display:none;
  }
}

@media (min-width: 568px) {
  #menu select, #menu button {
    display:none;
  }
}

//Problem: It looks gross in smaller browser widths and small devices
//Solution: To hide the text links and swap them out with a more appropriate navigation

//Create a select and apend to menu
var $select = $("<select></select>");
$("#menu").append($select);

//Cycle over menu links
$("#menu a").each(function(){
  var $anchor = $(this);
  //Create an option
  var $option = $("<option></option>");

  //Deal with selected options depending on current page
  if($anchor.parent().hasClass("selected")) {
    $option.prop("selected", true);
  }
  //option's value is the href
  $option.val($anchor.attr("href"));
  //option's text is the text of link
  $option.text($anchor.text());
  //append option to select
  $select.append($option);
});

//Bind change listener to the select
$select.change(function(){
  //Go to select's location
  window.location = $select.val();
});