如何添加一个下拉到这个简单的导航栏？ [英] How to add a dropdown to this simple navbar?

问题描述

很抱歉，如果这是一个愚蠢的问题，但我正在添加一个项目下拉列表到这个导航栏。它位于 navbar.php 文件中，这里是代码：

Sorry if this is a silly question but I'm looking to add a dropdown list of items to this navbar. It's in a navbar.php file and here is the code:

<link rel="stylesheet" href="/styles/navbar.css" type="text/css" /> <!-- navbar styles -->

<ul id="nav">
    <li><a href="/index.php">Home</a></li>
    <li><a href="/item1/">Item 1</a></li>
    <li><a href="/item2/">Item 2</a></li>
    <li><a href="/item3/">Item 3</a></li>
    <li><a href="/item4/">Item 4</a></li>
</ul>

这是 navbar.css / p>

Here's the navbar.css file:

#nav 
{
    width: 100%;
    float: left;
    margin: 0 0 3em 0;
    padding: 0;
    list-style: none;
    background-color: #242424;
    border-bottom: 1px solid #ccc; 
    border-top: 1px solid #ccc; 
    position:fixed;
    top:0px;
}

#nav li 
{
    float: left; 
}

#nav li a 
{
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    color: #7ACC01;
    border-right: 1px solid #ccc; 
}

#nav li a:hover 
{
    color: #c00;
    background-color: #fff; 
}

所以我的问题是，有一个简单的方法添加一个下拉列表例如，下拉菜单将出现在鼠标悬停器上？

So my question is, is there a simple way of adding a dropdown list of items to "Item 4" for example, where the dropdown menu will appear on mouseover?

推荐答案

我想让您了解我们这样做，而不是给你鱼。

I would like you to learn how we do that, instead of giving you the fish. With a rod, you can always fish by yourself.

看看我在这个小提琴做了什么：

Look at what I have done in this fiddle:

http://jsfiddle.net/jLkeH/

http://jsfiddle.net/jLkeH/

实际上是这样的：

nav ul ul {
    display: none;
}

    nav ul li:hover > ul {
        display: block;
    }

您必须隐藏 ul 您想要切换并将其设置为可见，如果有人在其上悬停。

You have to hide ul you want to toggle and set it back to visible if someone hovers on it.

PS：如你所见，我使用了 HTML5 ，这是推荐的， 。

PS: as you can see, I used HTML5, which is recommended, because it is (more) semantic.

这篇关于如何添加一个下拉到这个简单的导航栏？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！