Dropdown menu for webpage

Question

I created a simple website for practice purposes. I'm trying to create a dropdown menu for the Items in navigation but when I ran the website, it doesn't show anything. All files are saved in desktop.

Here is the code for my html(main.html) with jquery(jquery-1.3.2.min.js):

function mainmenu() {
  $(" #nav ul ").css({
    display: "none"
  });

  $(" #nav li ").hover(function() {
    $(this).find('ul:first').css({
      visibility: "visible",
      display: "none"
    }).show(400);
  }, function() {
    $(this).find('ul:first').css({
      visibility: "hidden"
    });
  });
}

$(document).ready(function() {
  mainmenu();
});

body {
  font-family: 'lucida grande', Tahoma, Verdana, Arial, sans-serif;
  background-color: #e9e9e9;
}
#wrapper {
  width: 1080px;
  margin: 0 auto;
  padding: 10px;
  border: 5px solid #dedede;
  background-color: #fff;
}
#banner {
  height: 200px;
  border: 3px solid #E3E3E3;
  background-color: blue;
  background-repeat: no-repeat;
  background-size: cover;
}
#navigation {
  height: 60px;
  border: 3px solid #E3E3E3;
  margin-top: 20px;
  margin-left: 5px;
  margin-right: 5px;
  background-color: red;
  text-shadow: 0.1em 0.1em #333;
}
#nav {
  list-style: none;
}
#nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: auto;
  display: none;
}
#nav li {
  font-size: 24px;
  float: left;
  position: relative;
  width: 180px;
  height: 50px;
}
#nav li ul li {
  background-color: green;
  background-repeat: no-repeat;
  background-size: cover;
  border: 3px solid #E3E3E3;
  padding-left: 10px;
}
#nav a:link,
#nav a:active,
#nav a:visited {
  display: block;
  color: #fff;
  text-decoration: none;
}
#nav a:hover {
  color: lightblue;
}
#content_area {
  float: left;
  width: 750px;
  height: 382px;
  margin: 20px 0px 20px 5px;
  padding: 10px;
  border: 3px solid #E3E3E3;
}
#sidebar {
  float: right;
  width: 250px;
  height: 402px;
  margin: 20px 10px 20px 10px;
  border: 3px solid #E3E3E3;
  background-color: yellow;
}
#footer {
  clear: both;
  width: auto;
  height: 40px;
  margin-top: 20px;
  background-color: blue;
  text-shadow: 0.1em 0.1em #333;
  color: #fff;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<div id="wrapper">
  <div id="banner">

  </div>

  <div id="navigation">
    <ul id="nav">
      <li><a href="#">Home</a>
      </li>
      <li><a href="#">Items</a>
      </li>
      <ul>
        <li><a href="#">T-Shirt</a>
        </li>
        <li><a href="#">Pants</a>
        </li>
        <li><a href="#">Accessories</a>
        </li>
      </ul>
      <li><a href="#">Shop</a>
      </li>
      <li><a href="#">About</a>
      </li>
    </ul>
  </div>

  <div id="content_area">


  </div>

  <div id="sidebar">

  </div>

  <div id="footer">
    <p>All rights reserved</p>
  </div>
</div>

Answer 1

The problem is not with your jQuery but with the HTML, you should wrap your dropdown menu (ul) with items (li)

function mainmenu() {
  $(" #nav ul ").css({
    display: "none"
  });

  $(" #nav li ").hover(function() {
    $(this).find('ul:first').css({
      visibility: "visible",
      display: "none"
    }).show(400);
  }, function() {
    $(this).find('ul:first').css({
      visibility: "hidden"
    });
  });
}

$(document).ready(function() {
  mainmenu();
});

body {
  font-family: 'lucida grande', Tahoma, Verdana, Arial, sans-serif;
  background-color: #e9e9e9;
}
#wrapper {
  width: 1080px;
  margin: 0 auto;
  padding: 10px;
  border: 5px solid #dedede;
  background-color: #fff;
}
#banner {
  height: 200px;
  border: 3px solid #E3E3E3;
  background-color: blue;
  background-repeat: no-repeat;
  background-size: cover;
}
#navigation {
  height: 60px;
  border: 3px solid #E3E3E3;
  margin-top: 20px;
  margin-left: 5px;
  margin-right: 5px;
  background-color: red;
  text-shadow: 0.1em 0.1em #333;
}
#nav {
  list-style: none;
}
#nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: auto;
  display: none;
}
#nav li {
  font-size: 24px;
  float: left;
  position: relative;
  width: 180px;
  height: 50px;
}
#nav li ul li {
  background-color: green;
  background-repeat: no-repeat;
  background-size: cover;
  border: 3px solid #E3E3E3;
  padding-left: 10px;
}
#nav a:link,
#nav a:active,
#nav a:visited {
  display: block;
  color: #fff;
  text-decoration: none;
}
#nav a:hover {
  color: lightblue;
}
#content_area {
  float: left;
  width: 750px;
  height: 382px;
  margin: 20px 0px 20px 5px;
  padding: 10px;
  border: 3px solid #E3E3E3;
}
#sidebar {
  float: right;
  width: 250px;
  height: 402px;
  margin: 20px 10px 20px 10px;
  border: 3px solid #E3E3E3;
  background-color: yellow;
}
#footer {
  clear: both;
  width: auto;
  height: 40px;
  margin-top: 20px;
  background-color: blue;
  text-shadow: 0.1em 0.1em #333;
  color: #fff;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<div id="wrapper">
  <div id="banner">

  </div>

  <div id="navigation">
    <ul id="nav">
      <li><a href="#">Home</a>
      </li>
      <li><a href="#">Items</a>
      
      <ul>
        <li><a href="#">T-Shirt</a>
        </li>
        <li><a href="#">Pants</a>
        </li>
        <li><a href="#">Accessories</a>
        </li>
      </ul>
        </li>
      <li><a href="#">Shop</a>
      </li>
      <li><a href="#">About</a>
      </li>
    </ul>
  </div>

  <div id="content_area">


  </div>

  <div id="sidebar">

  </div>

  <div id="footer">
    <p>All rights reserved</p>
  </div>
</div>

Answer 2

Yes the error is inside your code. You are trying to target the first ul inside the li but in your code you the ul is standalone/ outside the li.

<li><a href="#">Items</a>
  </li>
  <ul>
    <li><a href="#">T-Shirt</a>
    </li>
    <li><a href="#">Pants</a>
    </li>
    <li><a href="#">Accessories</a>
    </li>
  </ul>

see the ul is out side the Items li, put it inside and it will work like this.

<li><a href="#">Items</a>      
  <ul>
    <li><a href="#">T-Shirt</a>
    </li>
    <li><a href="#">Pants</a>
    </li>
    <li><a href="#">Accessories</a>
    </li>
  </ul>
  </li>

You were putting a ul inside a ul directly.