CODEWITHSUNDEEP
htmlcssxhtmlw3cw3c-validation
Grumblesaurus
Grumblesaurus

Reputation: 3119

Is there anything "wrong" with this markup?

Here is the markup I'm using:

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

Is there anything stylistically wrong about having that "ul" (class=subMenu) in the middle of a list without it having it's own li tag? This particular mark-up solves my problem, but I want at least be aware of whether I'm breaking some standard or convention.

The alternative is as follows, but it doesn't work for my particular task.

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

Thanks!

Upvotes: 2

Views: 94

Answers (4)

clairesuzy
clairesuzy

Reputation: 27674

as others have said the second way is valid

here's a forked jsfiddle showing some new CSS which should help

summary is that you want to keep the ul's and their li's full width no side padding or margins, so reset all ul's; then make the a's display block so they fill their parent li's - then use text-indent to create the indented look of the li's

then however you choose to apply an "active or selected" class - apply it to the li OR a and any hover changes can be made too.

Upvotes: 2

xkeshav
xkeshav

Reputation: 54084

BELOW is proper way

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

Upvotes: 2

Ateş G&#246;ral
Ateş G&#246;ral

Reputation: 140172

According to the HTML DTD, you cannot have a <ul> directly under another <ul>. You should nest it inside a <li>.

If you're worried about the additional padding/margins, you can remove them with a rule that only applies to <ul> elements as direct children of <li> elements:

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

(Or experiment with the best setting for your style)

Upvotes: 2

superUntitled
superUntitled

Reputation: 22567

Yes, there is something wrong, <ul>'s can be inside of <li>'s, but not other <ul>'s.

This is correct...

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

Upvotes: 4

Related Questions