Question

这里的第一个问题所以请放轻松我:)。

两周前我开始学习css3，现在我正在尝试构建一个纯css3下拉菜单系统。我得到了像这样构建的菜单

<body> 
        <div id="column">
            <div id="header">
                <heading1>Header.</heading1>
            </div>

            <div id="menu">
                <a href="Home.html"><menu-element class="chosen"> Home page</menu-element></a>
                <a href="Project.html"><menu-element>Project</menu-element></a>
                <a href="Gallery.html">
                    <menu-element> Gallery
                        <ul>
                            <li>1</li>
                            <li>2</li>
                        </ul>
                    </menu-element>
                </a>

            </div>
....
</body>

我正在通过整合我在一个教程上研究的css代码来处理我的css结构。我遇到问题的步骤是第一步：在没有鼠标悬停时隐藏子菜单项。

我试过

menu-element ul
{
    display: none;
}

仅隐藏菜单元素元素中嵌套的 ul 元素，但它不起作用.. ul 及其<孩子们还在那儿。可以通过告诉我哪里错了来帮助我吗？

Answer 1

您唯一的问题是您的html标记无效，（<menu-element>和<heading1>）。

而不是<menu-element>使用<nav>，而不是<heading1>使用<h1>。

Answer 2

我认为您正在IE中进行测试，并且在一些旧的兼容模式中。

在Chrome，Firefox和IE 11中，您的代码可以正常运行

fiddle

代码片段让SO开心：

menu-element ul
{
    display: none;
}

Chrome dev tools

确实，你的元素不是有效的HTML类型，（当然你应该使用有效的类型!!）但HTML5兼容的浏览器对此非常自由。

Answer 3

创建导航菜单的最佳做法是对整个菜单使用无序列表。这样，如果未加载样式（无论出于何种原因），它仍然可以正确读取。正如其他人所提到的，并且不是有效的标签。

我建议使用以下模型：

<nav>
    <ul>
        <li><a href="Home.html">Home</a></li>
        <li><a href="Project.html">Project</a></li>
        <li>
            <a href="Gallery.html">Gallery</a>
            <ul class="gallery">
                <li>1</li>
                <li>2</li>
            </ul>
        </li>
     </ul>
</nav>

对于css，你可以使用

ul.gallery{
    display: none;
}

或

nav ul li ul{
    display: none;
}

我在创建纯CSS下拉菜单时使用第二个选项，因为在创建更复杂的菜单时更容易遵循。它还允许您隐藏所有子菜单，而不仅仅是具有库类的子菜单。

CSS3定位问题

3 个答案: