Html 如何使用CSS创建CSS下拉菜单？

我的代码有问题。我有一个简单但很好的标题，所以我不想为了添加下拉菜单而改变我的代码。我不使用列表，就像大多数人使用下拉菜单一样，我更喜欢不使用列表

这是我的密码：

<!-- Navigation Bar -->

<div class="navbar">
    <div class="button_l"><a href="Main_Page.html"> Home </a></div>
    <div class="button"><a href="About.html"> About </a></div>
    <div class="button"><a href="History.html"> History </a></div>
    <div class="button"><a href="Breakdown.html"> Breakdown </a></div>
    <div class="button_r"><a href="#"> Yeah </a></div>
</div>

我使用按钮l表示左按钮，按钮l表示中间的三个按钮，按钮r表示右按钮。我更愿意为分解按钮能够有一个下拉菜单，也许两个或三个页面。我怎样才能在不做ul和li标签的情况下做到这一点

谢谢

另外，请不要使用javascript。只是简单纯粹的HTML和CSS。

你可以这样做

<div class="navbar">
    <div class="button button_l"><a href="Main_Page.html"> Home </a><div class="sub-menu">Menu here</div></div>
    <div class="button"><a href="About.html"> About </a></div>
    <div class="button"><a href="History.html"> History </a></div>
    <div class="button"><a href="Breakdown.html"> Breakdown </a></div>
    <div class="button button_r"><a href="#"> Yeah </a></div>
</div>

---

从语义上看应该是这样的，最好使用nav，而不是每个项目都有无序列表的div。然后，您可以使用li的悬停来轻松切换子AV的显示。比如：

加价

---

您可以在此处找到一个响应迅速的两级纯HTML/CSS下拉列表：

---

假设的子菜单在哪里…我在你的HTML中看不到。这是可行的，但它只允许我做一个下拉框。。。我怎么做不止一件事，比如说两件或三件？谢谢

<div class="navbar">
    <div class="button button_l"><a href="Main_Page.html"> Home </a><div class="sub-menu">Menu here</div></div>
    <div class="button"><a href="About.html"> About </a></div>
    <div class="button"><a href="History.html"> History </a></div>
    <div class="button"><a href="Breakdown.html"> Breakdown </a></div>
    <div class="button button_r"><a href="#"> Yeah </a></div>
</div>

.button {
    position:relative; 
}
.sub-menu {
    position:absolute;
    top:100%;
    left:-10000px;
}
.button:hover .sub-menu {
    left:0;
} 

<nav>
    <ul>
        <li><a href="#">One</a></li>
        <li><a href="#">Two</a></li>
        <li>
            <a href="#">Three</a>
            <ul>
                <li><a href="#">Four</a></li>
                <li><a href="#">Five</a></li>
            </ul>
        </li>
    </ul>
</nav>

li {
    float: left;
    position: relative;
    margin-right: 20px;
}
ul ul {
    display: none;
    position: absolute;
    bottom: 1em;
}
ul li:hover ul {
    display: block;
}