<style type="text/css">
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
li {
display: block;
color: #000;
padding: 0px 0 0px 0px;
text-decoration: none;
}
.submenu1 {
display: none;
}
.submenu2 {
display: none;
}
.submenu3 {
display: none;
}
.submenu4 {
display: none;
}
</style>
<script>
</script>
</head>
<body>
<ul id="Menu">
<li><img src="../images/untitled-2.png" width="124px" height="100px" alt="Logo" /></li>
<li><a class="active" href="#home">Home</a></li>
<li id="mc1">Managed IT Services</li>
<li id="submenu1" class="submenu1">Strategic Guidance</li>
<li class="submenu1">Expert Technicians</li>
<li class="submenu1">Full Service</li>
<li class="submenu1">Help Desk</li>
<li class="submenu1">Same Day Service</li>
<li id="mc2">IT Solutions</li>
<li class="submenu2">Business Continuity</li>
<li class="submenu2">Network Security</li>
<li class="submenu2">Security Systems</li>
<li class="submenu2">Cloud Services</li>
<li class="submenu2">Data Backup/Transfer/Restore</li>
<li class="submenu2">website Solutions</li>
<li class="submenu2">VOIP</li>
<li class="submenu2">Financing</li>
<li class="submenu2">Same Day Service</li>
<li id="mc3">About</li>
<li class="submenu3">Custom Builds</li>
<li class="submenu3">Access Control Servers</li>
<li class="submenu3">Imaging</li>
<li id="mc4">About</li>
<li class="submenu4">Business Technology Consulting</li>
<li class="submenu4">HW & SW</li>
<li class="submenu4">Deployment & Data Transfer</li>
<li class="submenu4">Network Design</li>
<li class="submenu4">Network Assessment</li>
<li class="submenu4">Financing</li>
</ul>
<script>
window.onload = function() {
$("#mc1" ).mouseenter(function() {
$("#submenu1").slideDown( 5 );
});
};
</script>
Above is the code for part of my website. I am trying to understand Jquery and I can't seem to get this slideDown script to work. What am I doing wrong?