-1

这是我的 html 文件：-

<div id="load">
<ul>
    <li>Activities
    <ul>
        <li>Physical1
        <ul>
            <li>Cricket
            <ul>
                <li>One Day</li>
            </ul>
            </li>
        </ul>
        </li>
        <li>Test1
    <ul>
        <li>Test At Abc</li>
    </ul>
    </li>
        <li>Test2
    <ul>
        <li>Test At Xyz</li>
    </ul>
        </li>
    </ul>
    </li>
</ul>
</div>


我想设置为 CSS 悬停。
我不太了解 css hover 所以给我建议。
这是我需要的输出。
悬停在Acvivities显示中

Physical1 
Test1
Test2

悬停在Physcial1显示Cricket...
谢谢...

4

3 回答 3

6 
ul > li > ul {
    display: none;  // hide all submenus
}

li:hover > ul {
    display: block; // show sub menu when parent li is hovered
}

演示

于 2013-04-24T13:09:11.810 回答
3 
ul li ul
{
    display:none;
}

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

http://jsfiddle.net/AyLYe/

于 2013-04-24T13:09:18.403 回答
2

我不会提供整个代码，但是有了这个基础，您可以调整代码以显示您需要的其余部分。

在开始之前，先看看我用谷歌搜索找到的这个教程：http: //line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu 我扫了一眼，看起来还不错，它至少会引导您完成概念和过程。

这是一个 JSFiddle：http: //jsfiddle.net/Kq7vD/

这是使它工作的CSS：

#load ul li ul {
    display: none;
}

#load ul li:hover ul {
    display: block;
}

请注意，通过删除#load，您可以使其适用于菜单中的每个列表。这样做的缺点是 CSS 规则随后会应用于您网站上的每个列表，即使它不应该是菜单。出于这个原因，建议您保持您的规则相对具体。

编辑以解决您的评论：

如果您的 HTML 结构在每个 UL 之前都包含一个 DIV，即使是嵌套的 UL，那么您的 css 规则也需要适应该新结构。特别要注意的是，您将不再将 UL 设置为display: none/block;DIV，而是将其设置为。

假设结构如下：

<div id="load">
   <div>
      <ul>
         <li>
            <div>
               <ul>
                  <li></li>
               </ul>
            </div>
         </li>
      </ul>
   </div>
</div>

你的代码看起来像......

#load div ul li div {
    display: none;
}

#load div ul li:hover div {
    display: block;
}
于 2013-04-24T13:10:13.193 回答