Html 不同级别的下拉菜单_Html_Css

Html 不同级别的下拉菜单

html css

Html 不同级别的下拉菜单,html,css,Html,Css,我想创建一个下拉菜单，其中我有3个级别，我已经完成了典型的一个工作，当我在主项目上悬停时，我可以看到第二个级别的项目。现在的问题是，我也可以看到第三级的项目，我想让第三级的项目只有当我悬停在第二级的项目，使其更好地看到。我从中提取代码并对其进行了修改这是我的file.html <html> <head> <link rel="stylesheet" type="text/css" href="css_menu.css" /> </hea

我想创建一个下拉菜单，其中我有3个级别，我已经完成了典型的一个工作，当我在主项目上悬停时，我可以看到第二个级别的项目。现在的问题是，我也可以看到第三级的项目，我想让第三级的项目只有当我悬停在第二级的项目，使其更好地看到。我从中提取代码并对其进行了修改

这是我的file.html

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css_menu.css" />
  </head>
  <body>
   <div id="menu">
    <ul class="formato"> 
        <li class="n-dos"><a class="menu" href="#">Home</a></li> 
        <li class="n-dos"><a class="menu" href="#">About</a> 
          <ul class="test"> 
            <li class="n-tres"><a class="menu" href="#">History</a></li> 
                <ul class="variacion">
                    <li><a class="menu" href="#">Ejemplo_1</a></li>
                    <li><a class="menu" href="#">Ejemplo_2</a></li>
                </ul>   
            <li class="n-dos"><a class="menu" href="#">Team</a></li> 
            <li class="n-dos"><a class="menu" href="#">Offices</a></li> 
          </ul> 
        </li> 
        <li class="n-dos"><a class="menu" href="#">Services</a> 
          <ul class="test"> 
            <li class="n-dos"><a class="menu" href="#">Web Design</a></li> 
            <li class="n-dos"><a class="menu" href="#">Internet Marketing</a></li> 
            <li class="n-dos"><a class="menu" href="#">Hosting</a></li> 
            <li class="n-dos"><a class="menu" href="#">Domain Names</a></li> 
            <li class="n-dos"><a class="menu" href="#">Broadband</a></li> 
          </ul> 
        </li>
        <li  class="n-dos"><a class="menu" href="#">Contact Us</a> </li> 
      </ul>
    </div>
</body>
</html>

我很确定你不想为这些东西设置元素级选择器。使用选择器，如

li ul 
{
    position: absolute;
    left: 120px;
    top: 35px;
    display: none;
}

及

你的风格规则太具体了。这是你应该用类选择器处理的事情。顺便说一句，如果你不让你的锚定标签显示：block，你将不会得到像宽度、填充和文本对齐等规则的行为。

我很确定你不想为这些东西设置元素级选择器。使用选择器，如

li ul 
{
    position: absolute;
    left: 120px;
    top: 35px;
    display: none;
}

及

你的风格规则太具体了。这是你应该用类选择器处理的事情。顺便说一句，如果你不让你的锚定标签显示：block，你就不会得到像宽度、填充和文本对齐等规则来表现。

最后发现了错误，我觉得很傻，这是一个错误位置的结束li标签。在第行的HTML文件中：

<li class="n-tres"><a class="menu" href="#">History</a></li>

不应该在那里，因为列表元素里面有一个子列表，这就是为什么它没有显示子列表元素的原因，因为错误的

就像列表中没有元素一样

最后发现了错误，我觉得很愚蠢，它是一个位于错误位置的结束标记。在第行的HTML文件中：

<li class="n-tres"><a class="menu" href="#">History</a></li>

不应该在那里，因为列表元素里面有一个子列表，这就是为什么它没有显示子列表元素的原因，因为错误的

就像列表里面没有元素一样

如果可以的话，包括一个活动链接。您可能会得到更好的帮助。您不应该在CSS选择器中使用下划线，而应该使用连字符

。谢谢，“-”改为“-”。如果可以，请包含一个实时链接。您可能会得到更好的帮助。您不应该在CSS选择器中使用下划线，而应该使用连字符

。谢谢您，“-”已更改为“-”。Thaks为您提供建议因为我已将这些更改为类，但我要求的问题仍然存在，我如何设置第三个级别“仅”可见当我超过嵌套列表的第二级时？我需要看到它的实际操作。我不清楚你在说什么。nicashop.freeiz.com/menu.html当我停留在“about”上时，你可以看到它不仅向我显示了下一个级别，即“历史”-“团队”-“办公室”，还向我显示了下一个级别“Ejempo_1”-“Ejempo_2”我不希望发生这种情况，我希望在“历史”上悬停时显示“Ejempo_1”-“Ejempo_2”。不要对所有li元素使用n_dos。那是你的问题。给他们一个不同的类名，让n_dos状态的悬停打开它们。您只希望在第二个菜单上打开它们，因此您忘记了CSS的编写方式将在主菜单项的悬停处显示所有子体。我已经尝试过，但当我这样做时，下一个级别不会显示，正如您所看到的，我在li上使用了n_tres，它与“历史”一起显示为了使第三级菜单可见，我在CSS li.n_tres:hover ul.variacion{display:block；}上添加了一行新行，所有设置都应该设置，但它不起任何作用。。。因此，我想可能是语法或逻辑有问题。Thaks for advice我把它们改成了类，但我要求的问题仍然存在，我如何设置第三级仅在我超过嵌套列表的第二级时才可见？我需要看到它的作用。我不清楚你在说什么。nicashop.freeiz.com/menu.html当我停留在“about”上时，你可以看到它不仅向我显示了下一个级别，即“历史”-“团队”-“办公室”，还向我显示了下一个级别“Ejempo_1”-“Ejempo_2”我不希望发生这种情况，我希望在“历史”上悬停时显示“Ejempo_1”-“Ejempo_2”。不要对所有li元素使用n_dos。那是你的问题。给他们一个不同的类名，让n_dos状态的悬停打开它们。您只希望在第二个菜单上打开它们，因此您忘记了CSS的编写方式将在主菜单项的悬停处显示所有子体。我已经尝试过，但当我这样做时，下一个级别不会显示，正如您所看到的，我在li上使用了n_tres，它与“历史”一起显示为了使第三级菜单可见，我在CSS li.n_tres:hover ul.variacion{display:block；}上添加了一行新行，所有设置都应该设置，但它不起任何作用。。。因此，我想可能是语法或逻辑有问题。