Sp Services does not work, displays nothing

Question

I created the Following SP Services code but it does not display anything on the screen of the Sharepoint page, the code is:

< style >
  /*---- CROSS BROWSER DROPDOWN MENU ----*/
  ul# nav {
    margin: 0 0 0 200px;
  }
ul.drop a {
  display: block;
  color: #fff;
  font - family: Verdana;
  font - size: 14px;
  text - decoration: none;
}
ul.drop, ul.drop li, ul.drop ul {
  list - style: none;
  margin: 0;
  padding: 0;
  border: 1px solid# fff;
  background: #555; color: # fff;
}
ul.drop {
  position: relative;
  z - index: 597;
  float: left;
}
ul.drop li {
  float: left;
  line - height: 1.3em;
  vertical - align: middle;
  zoom: 1;
  padding: 5px 10px;
}
ul.drop li.hover, ul.drop li: hover {
  position: relative;
  z - index: 599;
  cursor: default;
  background: #1e7c9a; }
    ul.drop ul { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; 
                 width: 195px; 
                background: # 555;
  border: 1px solid# fff;
}
ul.drop ul li {
  float: none;
}
ul.drop ul ul {
  top: -2px;
  left: 100 % ;
}
ul.drop li: hover > ul {
  visibility: visible
} < /style>

<script src="/sites / dev / SiteAssets / jquery - 2.1.4.min.js " type="
text / javascript "></script>
<script src=" / sites / dev / SiteAssets / jquery.SPServices - 2014.02.min.js " type="
text / javascript "></script>

<!-- HTML (placeholder) -->
<ul id="nav " class="drop">
</ul>

<script type="
text / javascript ">
 
    $(document).ready(function () {
        // Define the menu links list name.
        var menuLinksListName = "
Menu % 20Links ";
 
        // Define the fields string for the GetListItems operation.
        var fields = " < ViewFields > < FieldRef Name = 'Title' / > < FieldRef Name = 'URL' / >
  < FieldRef Name = 'Group' / > < FieldRef Name = 'SortOrder' / > < /ViewFields>";
 
        / / Build the query string
for the GetListItems operation.
var query = "<Query><OrderBy><FieldRef Name='Group' />
<FieldRef Name='SortOrder' Descending='True' /></OrderBy></Query>";

// Queries the 'MenuLinks' list to retrieve the menu items.  
// Then iterates through the records to build the menu/HTML.
$().SPServices({
operation: "GetListItems",
async: false,
listName: menuLinksListName,
CAMLViewFields: fields,
CAMLQuery: query,
completefunc: function(xData, Status) {
  // Clear any existing HTML within the "nav" element.
  $("#nav").html('');

  var lastGroup = -1;
  var menuString = '';
  // Loop through the retrieved SharePoint list items.
  $(xData.responseXML).SPFilterNode("rs:data").SPFilterNode("z:row").each(function() {
    // Extract the SharePoint list item data into variables.
    var title = $(this).attr("ows_Title");
    var url = $(this).attr("ows_URL");
    var group = $(this).attr("ows_Group");
    var sortOrder = $(this).attr("ows_SortOrder");

    // For a SharePoint column defined as a Hyperlink, the URL must be further parsed.
    var url_webaddress = '';
    if (url != null)
      url_webaddress = url.split(",")[0];

    // Format the HTML for the menu items, and partition in their respective groups. 
    if (group != lastGroup) {
      // If grouping change, close/open the HTML/list(s) tags as necessary.
      if (lastGroup > -1) {
        menuString += '</ul></li>';
      }

      menuString += '<li><a href="' + url_webaddress + '">' + title + '</a><ul>';
      lastGroup = group;

    } else {
      // If grouping not change, continue loading the HTML/ordered list.
      menuString += '<li><a href="' + url_webaddress + '">' + title + '</a></li>';
    }
  });

  if (lastGroup > -1) {
    menuString += '</ul></li>';
  }

  // Insert the created HTML code into the HTML placeholder (i.e. "nav") on the page.
  $("#nav").append(menuString);
}
});
});

< /script>