Question

我目前正在研究开发一个仅限CSS的下拉菜单。这个想法是当鼠标悬停在ul标签上时会出现另一个ul类。

以下是我目前的代码。

HTML

<head>
<link href="nav.css" rel="stylesheet" type="text/css">
</head>

<ul class="nav">
    <li class="topMenu"><a href="#">Home</a></li>
    <ul class="subMenu" id="home">
        <li><a href="#">Hello</a></li>
        <li><a href="#">World</a></li>      
    </ul>
</ul>

CSS

.nav, .topMenu, .subMenu
{
    position: relative;
    list-style: none;
}

.topMenu
{
    position: relative;
    float: left;
}

.subMenu
{
    display: none;
}

.topMenu a:hover + li
{
    display: block;
    background-color: blue;
}

这个想法是当鼠标悬停在li class =“topMenu”上时，ul class =“subMenu”id =“home”应该出现在下面。

理想情况下，这应该只是CSS格式而不需要任何javascript等。

感谢您提供的任何帮助。

Answer 1

您真正需要做的就是将<ul>嵌套在<li>元素中。

<nav>
    <ul>
        <li><a href="#">Link</a></li>
        <li>
            <a href="#">Link</a>
            <ul>
                <li><a href="#">Submenu</a></li>
                <li><a href="#">Submenu</a></li>
            </ul>
        </li>
        <li><a href="#">Link</a></li>
    </ul>
</nav>

以下是一些可以帮助您入门的CSS：

/* Resets */
nav a { 
    text-decoration: none;
    font: 12px/1 Verdana;
    color: #000;
    display: block; }
nav a:hover { text-decoration: underline; }
nav ul { 
    list-style: none;
    margin: 0;
    padding: 0; }
nav ul li { margin: 0; padding: 0; }

/* Top-level menu */
nav > ul > li { 
    float: left;
    position: relative; }
nav > ul > li > a { 
    padding: 10px 30px;
    border-left: 1px solid #000;
    display: block;}
nav > ul > li:first-child { margin: 0; }
nav > ul > li:first-child a { border: 0; }

/* Dropdown Menu */
nav ul li ul { 
    position: absolute;
    background: #ccc;
    width: 100%; 
    margin: 0;
    padding: 0;
    display: none; }
nav ul li ul li { 
    text-align: center;
    width: 100%; }
nav ul li ul a { padding: 10px 0; }
nav ul li:hover ul { display: block; }

预览：http://jsfiddle.net/Wexcode/BEhvQ/

Answer 2

需要进行一些调整：

<ul class="nav">
    <li class="topMenu"><a href="#">Home</a></li>
    <li class="subMenu">
    <ul id="home">
        <li><a href="#">Hello</a></li>
        <li><a href="#">World</a></li>      
    </ul>
    </li>
</ul>


.topMenu:hover + .subMenu
{
    display: block;
    background-color: blue;
}

Demo

当鼠标悬停在li class css上时显示ul类

2 个答案: