grouping of ul li without creating ul and li

Question

i have a data like this is a UL LI

 <ul> <li>Person 1</li> <li>Person 2</li> <li>Person 3</li> <li>Person 4</li> </ul>

but now I am getting a Department where i need to group it by DeptName at top and then the list of Persons

like

 <ul>Dept 1 <li>Person 1</li> <li>Person 2</li> Dept2 <li>Person 3</li> <li>Person 4</li> </ul>

without closing the ul > li in a grouping section

Answer 1

So make sublists. Eazy pezy.

 <ul> <li>Dept 1 <ul> <li>Person 1</li> <li>Person 2</li> </ul> </li> <li>Dept2 <ul> <li>Person 3</li> <li>Person 4</li> </ul> </li> </ul>

Answer 2

You can have grouping like this

 ul>li:first-child{ list-style-type:none; margin-left:-20px; }

 <ul> <li>Dept 1</li> <li>Person 1</li> <li>Person 2</li> </ul> <ul> <li>Dept2</li> <li>Person 3</li> <li>Person 4</li> </ul>

Answer 3

This might be where <dl> can be used.

<dl>
    <dt>Dept 1</dt>
        <dd>Person 1</dd>
</dl>

This is a "definition list". A list of definitions. The "definition term" would be Dept1. Followed by a "definition term" of Person 1.