下拉菜单导航栏问题

Question

我的下拉菜单代码有问题，注册和登录按钮是开箱即用的吗？ 我尝试了很多方法来编写它仍然无法解决的下拉菜单。 请给我一些关于如何编码的建议？

在此处输入图像描述

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<meta http-equiv="X-UA-Compatible" content="ie=edge" />

<title>Aunty Grocery</title>

* {

  margin: 0px;

  padding: 0px;

}

/*Nav-bar top*/

.navigation-bar {

  background-color: #fff;

  height: 60px;

  width: 100%;

  box-shadow: 0 2px 5px #000;

}

 /*Logo left*/

.logo {

  display: inline-block;

  vertical-align: top;

  margin-top: 10px;

  margin-left: 10px;

  width: 70px;

  height: 50px;

  float: left;

}

/*Nav-menu in Center*/

.navigation-bar ul {

  list-style-type: none;

  margin: 0;

  padding: 0;

  text-align: center;

  /*padding to move their position*/

  padding: 22px 150px 22px 0px;

}


.navigation-bar li {

  display: inline;

  margin: 0px 4px 0px 4px;

  padding: 5px;

}

.navigation-bar li a {

  color: #000;

  font-size: 14px;

  text-decoration: none;

  font-family:arvo;

}

/*menu-link to hover*/

.navigation-bar ul li a:hover {

  background-color: #3b9452;

  color: #fff;

  padding: 26px 20px 21px 20px;

}

/下拉菜单/

.下拉菜单 ul{

 Display:none;

}

.下拉菜单 ul:hover ul {

  Display:block;

}

/*account on the right*/

.account-right {

  float: right;

  position: relative;

  border-radius: 5px;

  bottom:50px;

  text-decoration: none;

  background-color:#3b9452;

  color:#fff;

  padding: 10px 40px 10px 40px;

  margin: 0px 5px 0px 5px;

 font-family:arvo;

 font-size:14px;

}

<nav class="navigation-bar">

  <img class="logo" src="Logo.png" alt="Logo" />

  <ul class="Dropdown-menu">

    <li><a href="index.html">Home</a></li>

    <li><a href="#">About Us</a></li>

    <li><a href="#">Grocery</a>

    <ul>

      <li><a href="#">Vegetables</a></li>

      <li><a href="#">Meats</a></li>

      <li><a href="#">Fish</a></li>

      <li><a href="#">Fruits</a></li>

      <li><a href="#">Seafood</a></li>

      <li><a href="#">Cakes,Biscuits</a></li>

      <li><a href="#">Others</a></li>

    </li>

    <li><a href="#">Career</a></li>

    <li><a href="#">Contact Us</a></li>

  </ul>

  <a href="#" class="account-right">Sign Up </a></li>

  <a href="#" class="account-right">Sign In </a></li>

</nav>

Answer 1

实际上你的 <ul> 和 <li> 标签没有正确关闭。 在您关闭链接后</li>，并且在“杂货店”子列表中，子列表未正确关闭，因此您之后拥有的所有代码都被考虑在子列表中（您的按钮也是如此）。

我让它与你的 CSS 和这个 HTML 一起工作：

<nav class="navigation-bar">

  <img class="logo" src="Logo.png" alt="Logo" />

  <ul class="Dropdown-menu">

    <li><a href="index.html">Home</a></li>

    <li><a href="#">About Us</a></li>

    <li><a href="#">Grocery</a>

      <ul>

        <li><a href="#">Vegetables</a></li>

        <li><a href="#">Meats</a></li>

        <li><a href="#">Fish</a></li>

        <li><a href="#">Fruits</a></li>

        <li><a href="#">Seafood</a></li>

        <li><a href="#">Cakes,Biscuits</a></li>

        <li><a href="#">Others</a></li>
      </ul>
    </li>

    <li><a href="#">Career</a></li>

    <li><a href="#">Contact Us</a></li>

  </ul>

  <a href="#" class="account-right">Sign Up </a>

  <a href="#" class="account-right">Sign In </a>

</nav>