I have been attempting to implement this code snippet from JSFiddle onto my website. Although I directly copied the HTML, used the CSS inline, and placed the Javascript in an external file, the functionality does not seem to be working properly. Feel free to check out what I've done on my test page. As I am still learning, any guidance on where I might be going wrong would be greatly appreciated.
The Code on My Test Page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Javascript test</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="javascript.js"></script>
<style>
body {
font-size: 0.8em;
}
/* jQuery UI theme settings */
.ui-menu .ui-menu-item {
margin: 1px 0;
border: 1px solid transparent;
}
.ui-menu .ui-menu-item a {
margin: 1px 0;
border: 1px solid transparent;
}
.ui-menu .ui-menu-item a.ui-state-highlight {
font-weight: normal;
margin: -1px;
color:red;
}
/* Demo settings */
#menu {
width: 30%;
}
</style>
</head>
<body>
<ul id="menu">
<li class="ui-state-disabled"><a href="#">Aberdeen</a>
</li>
<li><a href="#">Ada</a>
</li>
<li><a href="#">Adamsville</a>
</li>
<li><a href="#">Addyston</a>
</li>
<li> <a href="#">Delphi</a>
<ul>
<li class="ui-state-disabled"><a href="#">Ada</a>
</li>
<li><a href="#">Saarland</a>
</li>
<li><a href="#">Salzburg</a>
</li>
</ul>
</li>
<li><a href="#">Saarland</a>
</li>
<li> <a href="#">Salzburg</a>
<ul>
<li> <a href="#">Delphi</a>
<ul>
<li><a href="#">Ada</a>
</li>
<li><a href="#">Saarland</a>
</li>
<li><a href="#">Salzburg</a>
</li>
</ul>
</li>
<li> <a href="#">Delphi</a>
<ul>
<li><a href="#">Ada</a>
</li>
<li><a href="#">Saarland</a>
</li>
<li><a href="#">Salzburg</a>
</li>
</ul>
</li>
<li><a href="#">Perch</a>
</li>
</ul>
</li>
<li class="ui-state-disabled"><a href="#">Amesville</a>
</li>
</ul>
</body>
</html>