下拉菜单导航栏问题

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：悬停 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

实际上您的

和
• 标签没有正确关闭。链接后，您关闭了
，而在"杂货"子列表中，子列表未正确关闭，因此您之后的所有代码都被视为子列表(您的按钮也是如此(。

我让它与您的 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>