Что-то не так с этой разметкой?

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>.

Это правильно ...

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

Answer 2

, как говорили другие, действителен второй путь

вот раздвоенный jsfiddle , показывающий новый CSS, который должен помочь

Сводка

означает, что вы хотите, чтобы ul и их полная ширина li не имели боковых отступов или полей, поэтому сбросьте все ul; затем создайте блок отображения a, чтобы они заполняли свои родительские элементы li, - затем используйте text-indent, чтобы создать вид с отступом

.

тогда, однако, вы решите применить «активный или выбранный» класс - примените его к li ИЛИ a, и любые изменения при наведении могут быть также сделаны.

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

Согласно HTML DTD , вы не можете иметь <ul> непосредственно под другим <ul>.Вы должны вложить его в <li>.

. Если вас беспокоит дополнительные отступы / поля, вы можете удалить их с помощью правила, которое применяется только к <ul> элементам как прямым потомкам <li>.элементы:

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

(или поэкспериментируйте с лучшими настройками для вашего стиля)