Html 导航下拉列表显示的内容太左

我一直在努力解决这个问题，但无法找出我遗漏了什么。我希望下拉列表显示在其父项的正下方。该列表显示但全部转到最左边，并强制剩余的导航项目下降到另一行。我已经包含了一个关于当前外观的片段和的一个图像。此外，我一直在试图找出如何使用下拉列表将插入符号添加到导航项目中。请帮忙

.navbar{
背景：线性梯度（#9E0A0C，#ebebebeb）；
填充：10px；
边框顶部：实心1px#000000；
溢出：隐藏；
}
纳瓦尔先生{
文字装饰：无；
颜色：#ffffff；
字体大小：粗体；
字体大小：20px；
文本转换：大写；
填充物：3px 5px；
保证金：自动；
/*浮动：左侧；可能需要删除以显示边框*/
显示：内联；
}
纳瓦尔先生{
填充：0；
边际上限：0；
宽度：自动；
}
李国宝先生{
左边框：实心2px#000000；
显示：内联；
列表样式类型：无；
宽度：800px；
填充：0；
}
.导航栏a：活动{
背景色：#000000；
}
.导航栏a:悬停{
背景色：#ddd；
颜色：黑色；
字体大小：20px；
}
李：第一个孩子{
左边界：无；
}
.下拉列表{
显示：块；
溢出：隐藏；
/*浮动：左*/
}
.名单{
显示：无；
最小宽度：50px；
最大宽度：150px；
z指数：2；
盒影：0 8px 16px 0#e7e7e7；
背景:#050243；
}
.列表a{
颜色：#000000；
浮动：无；
字体大小：14px；
文字装饰：无；
显示：块；
文本对齐：左对齐；
背景#b6b6；
栏目：2个；
}
.列表a：悬停{
背景色：#EEEEEE；
}
.下拉列表：悬停.列表{
显示：块；
}
形式{
浮动：对；
填充：0px；
保证金：0；
溢出：自动；
}
输入{
边框：实心1px#000000；
背景图片：url（pics/search.png）；
背景重复：无重复；
背景位置：右中；
背景尺寸：15px；
边界半径：5px；
填充物：5px2px；
宽度：250px；
}

您可以通过首先将div.list元素设置为绝对位置来实现这一点。“display:block”属性将所有其他内容下推到下一行，因为block元素占用了空间

正如您现在看到的，列表不再向下推送内容，但现在它没有与正确的导航项目对齐。我们还将添加一个left:0，以便div.list位于父属性的左侧

现在，父属性需要相对位置，以便子元素上的left:0相对于父元素定位

.dropdown:hover .list {
   display: block;
   position: absolute;
   left: 0;
}

.navbar li {
   border-left: solid 2px #000000;
   display: inline;
   list-style-type: none;
   width: 800px;
   padding: 0;
   position: relative;
}

---

CSS代码的问题是，您没有将

位置：相对

和

位置：绝对

添加到

下拉列表

和

列表

选择器中，这是创建下拉列表所必需的。试试这个代码

.navbar {
  background: linear-gradient(#9E0A0C, #EBEBEB);
  padding: 10px;
  border-top: solid 1px #000000;
}

.navbar a {
  text-decoration: none;
  color: #ffffff;
  font-weight: bolder;
  font-size: 20px;
  text-transform: uppercase;
  padding: 3px 5px;
  margin: auto;
  /*float: left;  may need to be removed to show borders*/
  display: inline;
}

.navbar ul {
  padding: 0;
  margin-top: 0;
  width: auto;
}

.navbar li {
  border-left: solid 2px #000000;
  display: inline;
  list-style-type: none;
  width: 800px;
  padding: 0;
}

.navbar a:active {
  background-color: #000000;
}

.navbar li:hover > a {
  background-color: #ddd;
  color: black;
}

li:first-child {
  border-left: none;
}

.dropdown {
  display: block;
  overflow: hidden;
  position: relative;
  /*float: left;*/
}

.list {
  display: none;
  min-width: 50px;
  max-width: 150px;
  z-index: 2;
  box-shadow: 0 8px 16px 0 #e7e7e7;
  background: #050243;
  position: absolute;
  left: 0;
  top: 100%;
}

.list a {
  color: #000000;
  float: none;
  font-size: 14px;
  text-decoration: none;
  display: block;
  text-align: left;
  background-color: #B6B6B6;
  columns: 2;
}

.list a:hover {
  background-color: #EEEEEE;
}

.dropdown:hover .list {
  display: block;
}

form {
  float: right;
  padding: 0px;
  margin: 0;
  overflow: auto;
}

input {
  border: solid 1px #000000;
  background-image: url(pics/search.png);
  background-repeat: no-repeat;
  background-position: center right;
  background-size: 15px;
  border-radius: 5px;
  padding: 5px 2px;
  width: 250px;
}

-->请在现有文件中更新以下代码

.navbar{
背景：线性梯度（#9E0A0C，#ebebebeb）；
填充：10px；
边框顶部：实心1px#000000；
}
纳瓦尔先生{
文字装饰：无；
颜色：#ffffff；
字体大小：粗体；
字体大小：20px；
文本转换：大写；
填充物：3px 5px；
保证金：自动；
显示：内联；
}
纳瓦尔先生{
填充：0；
边际上限：0；
宽度：自动；
}
李国宝先生{
左边框：实心2px#000000；
显示：内联；
列表样式类型：无；
宽度：800px；
填充：0；
位置：相对位置；
}
.导航栏a：活动{
背景色：#000000；
}
.导航栏a:悬停{
背景色：#ddd；
颜色：黑色；
}
李：第一个孩子{
左边界：无；
}
.下拉列表{
显示：块；
溢出：隐藏；
}
.名单{
不透明度：0；
可见性：隐藏；
最小宽度：50px；
最大宽度：150px；
z指数：2；
盒影：0 8px 16px 0#e7e7e7；
背景:#050243；
位置：绝对位置；
顶部：20px；
左：0；
过渡：0.3s缓进缓出；
}
.列表a{
颜色：#000000；
浮动：无；
字体大小：14px；
文字装饰：无；
显示：块；
文本对齐：左对齐；
背景：#dddddd；
栏目：2个；
}
.列表a：悬停{
背景色：#EEEEEE；
}
.下拉列表：悬停.列表{
不透明度：1；
能见度：可见；
}
形式{
浮动：对；
填充：0px；
保证金：0；
溢出：自动；
}
输入{
边框：实心1px#000000；
背景图片：url（pics/search.png）；
背景重复：无重复；
背景位置：右中；
背景尺寸：15px；
边界半径：5px；
填充物：5px2px；
宽度：250px；
}

谢谢，这很有效，但现在列表只显示了第一个li。我想我必须调整z指数。li中缺少什么？哪个项目？我在ul中的附加nav a元素缺失。这些是至少包含两项的下拉菜单。在这一点上，我完全把自己搞糊涂了。我仍然在学习css，我已经尝试了所有的选项，现在我不知道要修改什么来修复它。我真的需要帮助。谢谢，这也很有效，但我的完整列表没有显示。谢谢，这也很有效，但我的完整列表没有显示。我已经将下面的部分改为z-index:-1，但仍然没有显示，有什么建议吗？