有什么“错误”吗？用这个标记？

Question

这是我正在使用的标记：

<ul class="menu">
    <li id="planning_menuItem" class="menuItem"><a href="/estate_planning/" title="Estate Planning">Estate Planning</a></li>
    <ul class="subMenu">
        <li id="will_menuItem" class="subMenuItem"><a href="/estate_planning/last_will_and_testament.htm" title="Last Will and Testaments">Last Will &amp; Testament</a></li>
        <li id="poa_menuItem" class="subMenuItem"><a href="/estate_planning/power_of_attorney.htm">Power Of Attorney</a></li>
        <li id="livingWill_menuItem" class="subMenuItem"><a href="/estate_planning/living_will.htm">Living Will</a></li>
        <li id="trusts_menuItem" class="subMenuItem"><a href="/estate_planning/trusts.htm">Trusts</a></li>
    </ul>
    <li id="probate_menuItem" class="menuItem">
        <a href="probate_administration.htm" title="Estate Administration">Estate Probate Administration</a>
    </li>
    <li id="realEstate_menuItem" class="menuItem"><a href="#" title="Real Estate Transactions">Real Estate</a></li>         
    <li id="medicaid_MenuItem" class="menuItem"><a href="#" title="">Medicaid</a></li>
    <li id="guardianships_menuItem" class="menuItem"><a href="#" title="">Guardianships</a></li>
</ul>

将“ul”（class=subMenu）放在列表​​中间而不具有自己的 li 标记是否有任何风格上的错误？这个特殊的标记解决了我的问题，但我至少想知道我是否违反了某些标准或约定。

另一种方法如下，但它不适用于我的特定任务。

<ul class="menu">
    <li id="planning_menuItem" class="menuItem"><a href="/estate_planning/" title="Estate Planning">Estate Planning</a>
    <ul class="subMenu">
        <li id="will_menuItem" class="subMenuItem"><a href="/estate_planning/last_will_and_testament.htm" title="Last Will and Testaments">Last Will &amp; Testament</a></li>
        <li id="poa_menuItem" class="subMenuItem"><a href="/estate_planning/power_of_attorney.htm">Power Of Attorney</a></li>
        <li id="livingWill_menuItem" class="subMenuItem"><a href="/estate_planning/living_will.htm">Living Will</a></li>
        <li id="trusts_menuItem" class="subMenuItem"><a href="/estate_planning/trusts.htm">Trusts</a></li>
    </ul>
    </li>
    <li id="probate_menuItem" class="menuItem">
        <a href="probate_administration.htm" title="Estate Administration">Estate Probate Administration</a>
    </li>
    <li id="realEstate_menuItem" class="menuItem"><a href="#" title="Real Estate Transactions">Real Estate</a></li>         
    <li id="medicaid_MenuItem" class="menuItem"><a href="#" title="">Medicaid</a></li>
    <li id="guardianships_menuItem" class="menuItem"><a href="#" title="">Guardianships</a></li>
</ul>

谢谢！

Answer 1

是的，有问题，

可以位于
• 的内部，但不能位于其他

  的内部。代码>的。

这是正确的...

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

Answer 2

根据 HTML DTD，您不能有 < code>

直接位于另一个
下。您应该将其嵌套在
• 内。

如果您担心额外的填充/边距，可以使用仅适用于作为

直接子元素的

元素的规则来删除它们元素：（

li > ul { margin: 0; padding: 0 }

或尝试最适合您风格的设置）

Answer 3

下面是正确的方法

<ul class="menu">
    <li id="planning_menuItem" class="menuItem">
        <a href="/estate_planning/" title="Estate Planning">Estate Planning</a>
    </li>
    <li>
    <ul class="subMenu">
        <li id="will_menuItem" class="subMenuItem">
            <a href="/estate_planning/last_will_and_testament.htm" title="Last Will and Testaments">Last Will & Testament</a>
        </li>
        <li id="poa_menuItem" class="subMenuItem">
            <a href="/estate_planning/power_of_attorney.htm">Power Of Attorney</a>
        </li>
        <li id="livingWill_menuItem" class="subMenuItem">
            <a href="/estate_planning/living_will.htm">Living Will</a>
        </li>
        <li id="trusts_menuItem" class="subMenuItem">
            <a href="/estate_planning/trusts.htm">Trusts</a>
        </li>
    </ul>
    </li>
    <li id="probate_menuItem" class="menuItem">
        <a href="probate_administration.htm" title="Estate Administration">Estate Probate Administration</a>
    </li>
    <li id="realEstate_menuItem" class="menuItem">
        <a href="#" title="Real Estate Transactions">Real Estate</a>
    </li>         
    <li id="medicaid_MenuItem" class="menuItem">
        <a href="#" title="">Medicaid</a>
    </li>
    <li id="guardianships_menuItem" class="menuItem">
        <a href="#" title="">Guardianships</a>
    </li>
</ul>

Answer 4

正如其他人所说，第二种方法是有效的

，这是一个分叉的 jsfiddle 显示一些新的 CSS，这应该有助于

总结是您希望保留 ul 及其 li 的全宽，没有侧边距或边距，因此重置所有 ul；然后制作 a 的显示块，以便它们填充其父 li 的显示块 - 然后使用 text-indent 创建 a 的缩进外观然后

，您可以选择应用“活动或选定”类 - 将其应用于 li 或 a，并且也可以进行任何悬停更改。