Html 创建一个纯CSS下拉菜单-子节点不'；不出现_Html_Css

Html 创建一个纯CSS下拉菜单-子节点不'；不出现

html css

Html 创建一个纯CSS下拉菜单-子节点不'；不出现,html,css,Html,Css,我一直在自学CSS，并尝试创建一个下拉菜单我正在学习和学习其他教程，但是编码中的子节点（子列表）不会出现 HTML和CSS如下所示 <body> <div id="menu"> <ul>  <h2><li><a>Header</a&g

我一直在自学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

菜单{
浮动：左；
}
#菜单ulli{
列表样式类型：块；
显示：内联；
}
#菜单李a{
}
#菜单李b{
}
#菜单：悬停{
背景:#555；
}
#菜单{
显示：无；
}
#菜单ul li：悬停>ul{
显示：块；
}正确的HTML：（这次没有b
标记）
基本上，最大的问题是选择器和：hover伪类之间的空间。演示：
<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 -->     

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