Question

我试图在这里制作一个非常简单的菜单基本上我想将鼠标悬停在链接上并显示一个菜单。但它没有出现！我在彼此内嵌了2个标签并给了em id。你可以在代码中看到其余部分。

＆＃13;

.navbar {
  width: 100%;
  height: 30px;
  overflow: no-display;
}

#headermenu {
  display: none;
}

#amenu:hover #headermenu {
  display: block;
}

＆＃13;

<nav class="navbar">
  <ul id="Header">
    <li>
      <a id="amenu">aaaa
        <div id="headermenu">
          <ul>
            <li><a>menue yek</a></li>
          </ul>
        </div>
      </a>
    </li>
  </ul>
</nav>

＆＃13;

Answer 1

您必须从a标签中删除子菜单，并将＆＃34; amenu＆＃34; li项目上的id，如下所示：

＆＃13;

.navbar{
   width:100%;
   height:30px;
   overflow: no-display;
}
#headermenu{
   display:none;
}

#amenu:hover #headermenu{
   display:block;
}

＆＃13;

<nav class="navbar">
  <ul id="Header">
    <li id="amenu">
      <a>aaaa</a>
      <div id="headermenu">
        <ul>
          <li><a>menue yek</a></li>
        </ul>
      </div>
    </li>
  </ul>
</nav>

＆＃13;

Answer 2

检查你渲染的HTML。

问题：

您正在观察的行为是由于html没有按照您期望的方式处理。

很可能是因为您试图在现有的中打开另一个锚链接，例如：<a href="#">containing link <a href="#">nested link</a></a>

您的用例中发生的事情很可能发生在以下嵌入式代码段中：

＆＃13;

.navbar {
  width: 100%;
  height: 30px;
  overflow: no-display;
}

#headermenu {
  display: none;
}

#amenu:hover #headermenu {
  display: block;
}

＆＃13;

<nav class="navbar">
  <ul id="Header">
    <li>
      <a id="amenu">aaaa
        <div id="headermenu">
          <ul>
            <li><a>menue yek</a></li>
          </ul>
        </div>
      </a>
    </li>
  </ul>
</nav>

＆＃13;

呈现输出：

在DOM中可见

<nav class="navbar">
  <ul id="Header">
    <li>
      <a id="amenu">aaaa
        </a><div id="headermenu"><a id="amenu">
          </a><ul><a id="amenu">
            </a><li><a id="amenu"></a><a>menue yek</a></li>
          </ul>
        </div>

    </li>
  </ul>
</nav>

您可能会注意到#headermenu 不再是#amenu的孩子，因此以下选择器#amenu:hover #headermenu会因此失败。

解决方案：

要解决上述处理和格式问题，请考虑将下拉元素设为兄弟到锚链接 - 并且不 嵌套在中。然后将id选择器移动到包含列表项本身（父li），例如：

<nav class="navbar">
  <ul id="Header">
    <li id="amenu"> <!-- add id attribute to containing element -->
      <a>aaaa</a> <!-- close your anchor tag -->
      <!-- make the dropdown a sibling of the anchor tag  -->
      <div id="headermenu">
        <ul>
          <li><a>menue yek</a></li>
        </ul>
      </div>
    </li>
  </ul>
</nav>

代码段示范：

＆＃13;

.navbar {
  width: 100%;
  height: 30px;
  overflow: no-display;
}

#headermenu {
  display: none;
}

#amenu:hover #headermenu {
  display: block;
}

＆＃13;

<nav class="navbar">
  <ul id="Header">
    <li id="amenu"> <!-- add id attribute to containing element -->
      <a>aaaa</a> <!-- close your anchor tag -->
      <!-- make the dropdown a sibling of the anchor tag  -->
      <div id="headermenu">
        <ul>
          <li><a>menue yek</a></li>
        </ul>
      </div>
    </li>
  </ul>
</nav>

＆＃13;

<强>可替换地：

您可以将id属性保留在嵌套的锚标记上，然后使用adjacent sibling combinator（+）代替。

＆＃13;

.navbar {
  width: 100%;
  height: 30px;
  overflow: no-display;
}

#headermenu {
  display: none;
}

/* use the adjacent sibling combinator (+) */
#amenu:hover + #headermenu {
  display: block;
}

＆＃13;

<nav class="navbar">
  <ul id="Header">
    <li>
      <a id="amenu">aaaa</a> <!-- close your anchor tag -->
      <!-- make the dropdown a sibling of the anchor tag  -->
      <div id="headermenu">
        <ul>
          <li><a>menue yek</a></li>
        </ul>
      </div>
    </li>
  </ul>
</nav>

＆＃13;

将鼠标悬停在标签上，但不显示菜单

2 个答案:

问题：

解决方案：