這個標記有什麼「錯誤」嗎？

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」（類=子菜單）在列表中的，中間無有它自己的李它標籤？這種特殊的標記解決了我的問題，但我至少要知道我是否打破了某種標準或慣例。

替代方法如下，但它不適用於我的特定任務。

<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或a以及任何懸停更改也可以進行。