Question

我想创建一个下拉菜单，其中我有3级，我已经完成了典型的一项工作，当我将鼠标悬停在主要项目上时，我可以看到第二级项目。现在的问题是我还可以看到第三级项目，我希望只有当我将第二级项目悬停以使其更好时才能看到第三级项目。我从http://www.alistapart.com/articles/horizdropdowns/获取代码并修改它。

这是我的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>

和我的CSS：

.formato
{
    margin:0;
    padding:0;
    list-style-type:none;
}
.n-dos
{
    display:inline;
    background-color:black;
}
.n-tres
{
    display:inline;
    background-color:black;
}
.test
{
    position: absolute;
    left: 120px;
    top: 35px;
    display: none;
}
.variacion
{
    position: absolute;
    top: 30px;
    left: 120px;
    display: none;
    margin:0;
    padding:0;
    list-style-type:none;
}
.menu
{   
    float:left;
    text-decoration:none;
    color:white;
    background-color:#000000;
    padding:0.3em 0.6em;
    text-align:center;
    width: 150px;
    font-family: 'Trebuchet MS';
}
li.n-dos:hover ul.test 
{ 
    display:inline;
}
li.n-tres:hover ul.variacion 
{ 
    display:block;
}

Answer 1

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

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

和

ul li a 
{   
    float:left;
    text-decoration:none;
    color:white;
    background-color:#000000;
    padding:0.3em 0.6em;
    text-align:center;
    width: 150px;
    font-family: 'Trebuchet MS';
}

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

Answer 2

终于找到了错误，我感到愚蠢，这是一个在错误的地方关闭li标签。在行中的HTML文件中：

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

不应该存在，因为那个列表元素里面有一个子列表，这就是为什么它没有显示子列表元素导致因为错误</li>它就像列表中没有元素一样

下拉菜单不同级别

2 个答案: