创建纯CSS下拉菜单-子节点不会出现

Question

我一直在自学CSS，并尝试创建一个下拉菜单。

我正在关注此页面和其他教程，但是我的编码中的子节点（子列表）不会出现。

HTML和CSS如下所示。

    <body>  
        <div id="menu">           
            <ul>
                <!-- 1st level -->
                <h2><li><a>Header</a></li></h2>  
                <li><b href="#">Home</b></li>              
                <li>
                    <b href="#">Patterns</b>
                    <ul>
                        <!-- 2nd level-->
                        <li><b href ="#">Event</b></li>
                        <li><b href ="#">Case</b></li>
                    </ul>                        
                </li>                    
                <!-- other menus --> 
            </ul>         
        </div> <!-- end menu -->     
    </body>

CSS

 menu { float: left; } #menu ul li { list-style-type: block; display: inline; } #menu li a { <!-- omit --> } #menu li b { <!-- omit --> } #menu ul li :hover { background: #555; } #menu ul li ul { display: none; } #menu ul li :hover > ul { display: block; }

至少我明白， #menu ul li ul ， display必须是none ，但我无能，如何展现它的时候我将鼠标悬停它。 如果您能提供任何建议，我将不胜感激。

Answer 1

正确的HTML ：（这次没有b标签）

<div id="menu">           
            <ul>
                <!-- 1st level -->
                <h2><li><a>Header</a></li></h2>  
                <li><a href="#">Home</a></li>              
                <li>
                    <a href="#">Patterns</a>
                    <ul>
                        <!-- 2nd level-->
                        <li><a href ="#">Event</a></li>
                        <li><a href ="#">Case</a></li>
                    </ul>                        
                </li>                    
                <!-- other menus --> 
            </ul>         
        </div> <!-- end menu -->

和CSS：

#menu {
        float: left;
    }

    #menu ul li {
        list-style-type: block;
        display: inline;
    }

 #menu ul li:hover {
        background: #555;
    }

    #menu ul li ul {
        display: none;
    }

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

基本上最大的问题是选择器和：hover伪类之间的空间 。 演示： http : //jsfiddle.net/LL34k5ku/4/

创建纯CSS下拉菜单-子节点不会出现

问题描述

1 个解决方案

解决方案1
2 已采纳 2015-08-22 14:33:03

创建纯CSS下拉菜单-子节点不会出现

问题描述

1 个解决方案

解决方案1 2 已采纳 2015-08-22 14:33:03

解决方案1
2 已采纳 2015-08-22 14:33:03