html - How do I hide the parent of a nested list while keeping the nested list visible? -

html - How do I hide the parent of a nested list while keeping the nested list visible? -

i want hide parent of nested list while keeping nested list visible. in addition, not want parent take space on page when hidden.

html <ul> <li class="parent">menu <ul class="nested"> <li>about</li> </ul> </li> </ul> css effort 1 .parent { display: none; } .nested { display: block; }

i not nested items show using method.

css effort 2 .parent { visibility: hidden; } .nested { visibility: visible; }

the parent still took space on page, though not see it.

is there 3rd alternative or have utilize visibility , alter margins on nested list?

a similar question asked here how hide parent div, keeping inner div visible? want create sure there isn't more appropriate/accurate reply ones proposed there (e.g. move 1 element out of other) , here (use visibility).

as @paulie_d has mentioned in comments above, can't accomplish css although can utilize javascript pull element out or duplicate , show it. here's example:

class="snippet-code-js lang-js prettyprint-override">var element = jquery('.nested').clone(); element.appendto('ul'); class="snippet-code-css lang-css prettyprint-override">.parent { display: none; } class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li class="parent">menu <ul class="nested"> <li>about</li> </ul> </li> </ul>

i cloning .nested using jquery .clone() function , appending visible item on page i.e. <ul>. can append other visible item on page per wish.

html css html5 css3