html - 如何使用 CSS 制作 CSS 下拉菜单？

Question

我的代码有问题。我有一个 header (一个简单但不错的 header )，所以我不想为了添加下拉菜单而大量更改我的代码。我不使用列表，因为大多数人对他们的下拉菜单都使用列表，而且我宁愿不使用列表。

这是我的代码:

<!-- 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>

这是它附带的 CSS:

.navbar {
width: 90%;
height: 30px;
font-family: 'Press Start 2P', cursive;
font-size: 15px;
line-height: 25px;
position: absolute;
border: 2px solid;
border-radius: 250px;
background: url("../images/navbar.png") repeat-x;
margin-left: 50px;
}

.button a {
float: left;
width: 20%;
height: 30px;
text-align: center;
text-decoration: none;
}

.button_l a {
float: left;
width: 20%;
height: 30px;
text-align: center;
text-decoration: none;
}

.button_r a {
float: left;
width: 20%;
height: 30px;
text-align: center;
text-decoration: none;
}

.button a:hover {
float: left;
color: #fff;
width: 20%;
height: 30px;
text-align: center;
text-decoration: none;
background: url("../images/navbar_roll.png") repeat-x;
}

.button_l a:hover {
float: left;
color: #fff;
width: 20%;
height: 30px;
text-align: center;
text-decoration: none;
border-top-left-radius: 250px;
border-bottom-left-radius: 250px;
background: url("../images/navbar_roll.png") repeat-x;
}

.button_r a:hover {
float: left;
color: #fff;
width: 20%;
height: 30px;
text-align: center;
text-decoration: none;
border-top-right-radius: 250px;
border-bottom-right-radius: 250px;
background: url("../images/navbar_roll.png") repeat-x;
}

我将 button_l 用于左键，button 用于中间三个按钮，button_r 用于右键。我希望“分割”按钮能够有一个下拉菜单，大概两三页。如果不制作 ul 和 li 标签，我怎么能做到这一点？

谢谢

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

Answer 1

你可以这样做

<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>

添加以下CSS

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

应该看起来像这样 http://jsfiddle.net/ryJT4/1/