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>

在没有自己的li标签的情况下，在列表中间放置“ul”（class = subMenu）是否存在风格上的错误？这个特殊的标记解决了我的问题，但我至少要知道我是否违反了一些标准或惯例。

替代方案如下，但它不适用于我的特定任务。

<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>内。

这是正确的......

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

Answer 2

根据HTML DTD，您不能在另一个<ul>下直接<ul>。您应该将其嵌套在<li>。

中

如果您担心额外的填充/边距，可以使用仅适用于<ul>元素作为<li>元素的直接子元素的规则将其删除：

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 &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 4

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

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

总结是你要保持ul及其li的全宽没有边填充或边距，所以重置所有ul;然后制作a的显示块，以便填充他们的父li - 然后使用text-indent创建li的缩进外观

然后您选择应用“有效或已选择”类 - 将其应用于li或a，并且也可以进行任何悬停更改。

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

4 个答案: