CSS3定位问题
[英]CSS3 targeting issue
问题描述
这里的第一个问题，所以请对我轻松：)。
我两周前开始研究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及其li子项仍然存在。 谁能告诉我我哪里错了来帮助我？
3 个解决方案
解决方案1
1 2014-02-25 15:16:56
唯一的问题是您具有无效的html标记（ <menu-element>和<heading1> ）。
代替<menu-element>使用<nav> ，代替<heading1>使用<h1> 。
解决方案2
0 已采纳 2014-02-25 16:56:47
我认为您正在IE和某些旧的兼容模式下进行测试。
在Chrome，Firefox和IE 11中，您的代码有效
代码片段让SO很高兴：
menu-element ul
{
display: none;
}
的确，您的元素不是有效的HTML类型，（当然，您应该使用有效的HTML类型！），但是与HTML5兼容的浏览器对此相当宽松。
解决方案3
0 2014-02-25 17:13:39
创建导航菜单的最佳实践是对整个菜单使用无序列表。 这样，如果不加载样式（无论出于何种原因），则仍可以正确读取。 正如其他提到的那样，它们不是有效的标签。
我建议使用以下模型：
<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动画问题
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.