Is there anything "wrong" with this markup? - html

Question

Here is the markup I'm using:
<ul class="menu">
<li id="planning_menuItem" class="menuItem">Estate Planning</li>
<ul class="subMenu">
<li id="will_menuItem" class="subMenuItem">Last Will & Testament</li>
<li id="poa_menuItem" class="subMenuItem">Power Of Attorney</li>
<li id="livingWill_menuItem" class="subMenuItem">Living Will</li>
<li id="trusts_menuItem" class="subMenuItem">Trusts</li>
</ul>
<li id="probate_menuItem" class="menuItem">
Estate Probate Administration
</li>
<li id="realEstate_menuItem" class="menuItem">Real Estate</li>
<li id="medicaid_MenuItem" class="menuItem">Medicaid</li>
<li id="guardianships_menuItem" class="menuItem">Guardianships</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">Estate Planning
<ul class="subMenu">
<li id="will_menuItem" class="subMenuItem">Last Will & Testament</li>
<li id="poa_menuItem" class="subMenuItem">Power Of Attorney</li>
<li id="livingWill_menuItem" class="subMenuItem">Living Will</li>
<li id="trusts_menuItem" class="subMenuItem">Trusts</li>
</ul>
</li>
<li id="probate_menuItem" class="menuItem">
Estate Probate Administration
</li>
<li id="realEstate_menuItem" class="menuItem">Real Estate</li>
<li id="medicaid_MenuItem" class="menuItem">Medicaid</li>
<li id="guardianships_menuItem" class="menuItem">Guardianships</li>
</ul>
Thanks!

Answer 1

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>

Answer 2

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)

Answer 3

BELOW is proper way
<ul class="menu">
<li id="planning_menuItem" class="menuItem">
Estate Planning
</li>
<li>
<ul class="subMenu">
<li id="will_menuItem" class="subMenuItem">
Last Will & Testament
</li>
<li id="poa_menuItem" class="subMenuItem">
Power Of Attorney
</li>
<li id="livingWill_menuItem" class="subMenuItem">
Living Will
</li>
<li id="trusts_menuItem" class="subMenuItem">
Trusts
</li>
</ul>
</li>
<li id="probate_menuItem" class="menuItem">
Estate Probate Administration
</li>
<li id="realEstate_menuItem" class="menuItem">
Real Estate
</li>
<li id="medicaid_MenuItem" class="menuItem">
Medicaid
</li>
<li id="guardianships_menuItem" class="menuItem">
Guardianships
</li>
</ul>

Answer 4

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.