Question

我一直在使用现在可以使用的下拉菜单。我无法解释/不理解的只是一件奇怪的事情。这是一段相关的代码：

<ul>
  <li><p>Music Theory 1&nbsp;&nbsp;&nbsp;</p></li>
  <li><p>&lt;&nbsp;&nbsp;&nbsp;&nbsp;</p><a href="#" id="lesson">Music Alphabet</a>
     <ul>
        <li><a id="l0" class="lesnitem" href="#">Piano Keyboard</a></li>
        <li><a id="l1" class="lesnitem" href="#">Note Types</a></li>
    ...

请注意第二个“ li”上没有结束的“ li”标签如果放进去，行为会急剧变化。内部的“ ul”不再隐藏，并且以不同的方式布置（跨而不是向下），因此缺少它会影响CSS，但我看不到它。

我想我可以省略它，但是它使我感到愤怒。可能与内部的“ a”标签有关吗？

有人可以帮助我理解吗？

Answer 1

<li>的结束标记是可选的。如果您未明确将其插入，它将自动插入下一个<li>或</ul>（或</ol>）之前。

如果您手动将其插入<ul>之前，那么您正在移动嵌套的<ul>，因此它不再位于<li>内。

相反，您尝试将<ul>创建为HTML禁止的另一个<ul>的子元素。

Answer 2

您有一个嵌套列表-即另一个列表中的一个列表。这样做的方法是在父列表的列表项内创建一个新列表。通常在CSS下拉菜单中用于“子菜单”。

示例：

<ul>
  <li>First Item</li>
  <li>Second Item</li>
  <li>Third item with a sub list
    <ul>
      <li>Sub item 1</li>
      <li>Sub item 2</li>
    </ul>
  </li>
</ul>

使用CSS菜单通常会执行以下操作：使用CSS“隐藏”子列表（例如，通过应用display: none），然后将鼠标悬停在包含列表项上时，就会显示该列表。

这是使用此结构的非常简单的样式的示例：

#submenu ul {
  display: none;
}

#submenu:hover ul {
  display: block;
}

ul li {
  cursor: pointer;
}

<ul>
  <li>First Item</li>
  <li>Second Item</li>
  <li id="submenu">Submenu (hover to show)
    <ul>
      <li>Submenu item 1</li>
      <li>Submenu item 2</li>
    </ul>
  </li>
</ul>

请注意，</li>是可选标记。您可以创建如下列表：

<ul>
  <li>First Item
  <li>Second Item
</ul>

您的浏览器将执行的操作是猜测结束标记应位于何处，然后将其隐式插入该位置。在这种情况下，它将在两个列表项中的单词“ item”之后插入结束标记。

当然，最好明确地关闭所有标签。

要专门回答您的问题：

这与内部的“ a”标签有关吗？

不。这与您的“ a”标签无关。如上所述，</li>在技术上是可选的。

但是对于您发布的代码，您使用的是嵌套列表设置，而不依赖于结束标记的可选性。我可以断言这是因为，如果您实际上已经关闭了其中包含子列表的li标记，那么您将有ul作为ul的子代，这是不允许的。 / p>

有人可以帮助我理解吗？

希望以上是这样做的。但总结一下：

</li>标签在技术上是可选的。您没有必须来使用它，但是始终关闭HTML标记是一种很好的做法。
列表项中是否存在锚标记不相关。
在您发布的特定示例中，您有一个嵌套列表或子列表；这是通过在<li>标记内放置一个新列表来完成的。

为什么此HTML没有结束<li>标记？

2 个答案: