javascript - 网页下拉菜单

Question

为了练习，我创建了一个简单的网站。我正在尝试为导航中的元素创建一个下拉菜单，但是当我运行该网站时，它没有显示任何内容。所有文件都保存在桌面上。

这是我的 html(main.html) 和 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

是的，错误在您的代码中。您正在尝试以 li 中的第一个 ul 为目标，但在您的代码中，您的 ul 是独立的/在 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>

看到 ul 在 Items 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>

您直接将 ul 放入 ul 中。