Html 对水平下拉列表进行编码会使链接彼此重叠

我试图编写一个下拉菜单，其中悬停列表项水平显示链接列表

我的代码现在的情况是，所有的链接都是相互重叠的，我一辈子都不知道如何修复它们

我试着增加高度和宽度，然后调整填充、边距，随便你说。以某种方式使用显示：内联；还不足以实现这一目标

如果有人能帮我解决这个问题，我将不胜感激

<header>
    <nav>
        <div class="container">
            <div class="wrapper">
                <h1><img alt="logo" src="logosmall.jpg" />
                    <a href="home.html"><strong>New Ideas</strong>Education</a>
                </h1>
                <ul>
                    <li><a href="index.html" class="current">about us</a></li>
                    <li>teachers
                        <ul>
                            <li>Literature</li>
                            <li>International</li>
                            <li>Staff</li>
                        </ul>
                    </li>
                    <li><a href="index-2.html">lessons</a></li>
                    <li><a href="index-3.html">reviews</a></li>
                </ul>
            </div>
        </div>
    </nav>
</header>

---

首先确定你想在哪里以及如何显示控件，如果你说所有控件都在另一个上面，那么所有这些位置都有相同的值，css几乎所有的ID和类都有相同的值，我可以给你和示例来修复，它可能会帮助你修复你的问题

假设您需要两个下拉列表，一个在左侧，一个在右侧，然后执行此操作 注意（这只是一个例子）

在这些div的内部使用你的下拉控件或任何控件并修改宽度，如果你想，让我知道它是否有效，将帮助你

<div id=Main>
<div id=left></div>
<div id=right></div>
</div>

   #left
{
height:100%;
width:50%;
border:1px solid black;
background-color: #ffffff;
float:left;
}

 #right
{
height:100%;
margin-left:50%;
border:1px solid black;
background-color: #ffffff;
float:right;
}