Question

我一直在教自己CSS并试图创建一个下拉菜单。

我关注this page和其他教程，但我的编码中的子节点（子列表）不会出现。

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

＆＃13;

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

＆＃13;

至少我理解，在#menu ul li ul中，display需要none，但是当我将鼠标悬停时，我对如何展示它毫无头绪。如果您愿意提供任何建议，我将不胜感激。

Answer 1

正确的HTML :(此时没有<div id="menu"> <ul>  <h2><li><a>Header</a></li></h2> <li><a href="#">Home</a></li> <li> <a href="#">Patterns</a> <ul>  <li><a href ="#">Event</a></li> <li><a href ="#">Case</a></li> </ul> </li>  </ul> </div> 个标签）

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

和CSS：

$scope.myTree = {
    name: "Root",
    id: 1,
    items: [
        {
            name: "Arts",
            id: 12,
            items: [
                { name: "Sculpture", id: 220 },
                { name: "Painting", id: 221 },
                { name: "Music", id: 222 }
            ]
        },
        {
            name: "Science",
            id: 45,
            items: [
                { name: "Biology", id: 345 },
                { name: "Chemistry", id: 346 },
                { name: "Physics", id: 347}
            ]
        }
    ]
};

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

创建一个纯CSS下拉菜单 - 子节点不会显示

1 个答案: