Css 下拉式子菜单水平问题

我对下拉菜单有问题。我不希望菜单是垂直下拉菜单，而是水平线子菜单。当我不悬停在“about”和“contact me”菜单链接上时，“about”和“contact me”菜单链接会被推到最右边，当我悬停在它上面时，会出现垂直下拉菜单

HTML

<div id="wrap_link">
    <div id="toplink">
        <ul>
            <li><a href="index.php">Home</a>
            </li>
            <li><a href="#">Services</a>

                <ul>
                    <li><a href="tutorials.php">tutorials</a>
                    </li>
                    <li><a href="exams.php">Exams</a>
                    </li>
                    <li><a href="mocks.php">Mocks</a>
                    </li>
                </ul>
            </li>
            <li><a href="about.php">About</a>
            </li>
            <li><a href="contact.php">Contact</a>
            </li>
        </ul>
    </div>
    <!--topLinks -->
</div>

---

我不会使用

float

，而是使用

display:inline block

更改：

#toplink ul li {
position: relative;
float:left;
}

致：

见：

有关内联块与浮动的更多信息：

更新

要使所有东西都是水平的，请使用以下内容：

#toplink ul>li{
/*  position: relative;*/
    display:inline-block;
    vertical-align:top;
}

---

@3dgoo，下拉生成器不允许我像我一样水平直列下拉want@user1869730-你看过他们的不同菜单列表了吗？：对不起，我之前想发送此链接，但在同一链接中放了两次。这是一个水平子菜单：Jon，下拉位必须是水平内联下拉对不起，我不能给你代表乔恩，这个网站有一些巨魔和人谁不“理解”2，但你清楚地理解，谢谢你的帮助

#toplink ul>li{
/*  position: relative;*/
    display:inline-block;
    vertical-align:top;
}