Question

我的代码存在问题。我有一个标题（一个简单但不错的标题）所以我不想更改我的代码以添加一个下拉菜单。我不使用列表，因为大多数人都会使用下拉菜单，我不想使用列表。

这是我的代码：

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

Answer 2

从语义上讲，最好使用nav而不是div，每个项目都有一个无序列表。然后，您可以使用li的悬停轻松切换子视图的显示。类似的东西：

<强>标记

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

Answer 3

您可以在此处找到响应式的2级纯HTML / CSS下拉列表：

http://codepen.io/manik314/pen/BaqrI

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

3 个答案: