Html 子菜单定位问题

这是我目前正在使用的，我试图为团队部分创建一个下拉菜单，但它一直显示在团队菜单选择的左侧。以下是供参考的网站：

CSS

以此作为基本菜单

<ul>
<li>
    <a href="/">Home</a>|
</li>
<li>
    <a href="/teams">Teams</a>|
    <!--<ul>
     <li><a href="#">8U</a></li>
     <li><a href="#">9U</a></li>
     <li><a href="#">10U</a></li>
     <li><a href="#">11U</a></li>
  </ul>-->
        </li>
<li>
    <a href="/schedule">Schedule</a>|
</li>
<li>
    <a href="/forms">Forms</a>|
</li>
<li>
    <a href="/sponsors">Sponsors</a>|
</li>
<!--
<li>
    <a href="/news">News</a>|
</li>
-->
<!--
<li>
    <a href="/media">Media</a>|
</li>
-->
<li>
    <a href="/about-us">About</a>|
</li>
<li>
    <a href="/contact-us">Contact</a>
</li>
<li>&nbsp;</li>

|


|


|


|


|


|

---

如果我将CSS中的位置更改为“相对”，它将从图像左侧的位置移动它。居中位置将使触点连杆在徽标上移动。我想我在CSS子菜单中缺少了一些额外的编码，但是我尝试了一些方法，它们似乎不起作用。任何帮助都会很好。提前感谢

正如我在评论中提到的，您发布的代码不包含下拉菜单的任何样式。下面是一个小提琴，展示了如何基于现有标记和样式创建仅CSS的下拉菜单：

---

请注意，您站点上的顶级

ul

当前已将

溢出设置为
隐藏
，这将隐藏任何下拉菜单。如您所见，我已将溢出更改为
visible
这是您菜单中的完整HTML和CSS吗？您可以尝试类似的方法。。。或者提供完整代码您发布的代码似乎是针对顶级菜单的-下拉菜单没有样式。你能发布一些代码或JSFIDLE或CodePen演示，展示你试图让下拉列表工作的内容吗？下拉列表被注释掉了。你需要查找更多关于定位的信息。首先，没有所谓的
center
position。您的列表项（下拉列表的父项）需要是相对位置的。您的无序列表--下拉列表本身--需要是绝对位置。并且不要在下拉列表中设置列表项，除非您希望菜单项都在一行中，我猜您可能不希望。另外，您需要删除无序列表中的溢出：隐藏。这正是我需要的。谢谢@JonathanNicol！唯一的问题是，当我把你在小提琴中所做的事情放在样式中时，菜单会停留在它所属的位置，但它会将身体的内容移到右边并压扁它。如果没有看到这个问题的演示，我无法回答这个问题。
<ul>
<li>
    <a href="/">Home</a>|
</li>
<li>
    <a href="/teams">Teams</a>|
    <!--<ul>
     <li><a href="#">8U</a></li>
     <li><a href="#">9U</a></li>
     <li><a href="#">10U</a></li>
     <li><a href="#">11U</a></li>
  </ul>-->
        </li>
<li>
    <a href="/schedule">Schedule</a>|
</li>
<li>
    <a href="/forms">Forms</a>|
</li>
<li>
    <a href="/sponsors">Sponsors</a>|
</li>
<!--
<li>
    <a href="/news">News</a>|
</li>
-->
<!--
<li>
    <a href="/media">Media</a>|
</li>
-->
<li>
    <a href="/about-us">About</a>|
</li>
<li>
    <a href="/contact-us">Contact</a>
</li>
<li>&nbsp;</li>

.header ul {
    overflow: visible;
}
.header ul li {
    position: relative;
}

/* Dropdown */
 .header ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #ddd;
}
.header ul ul li {
    float: none;
}
.header > ul > li:hover > ul {
    display: block;
}