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


Tags: html,css,html5,css3

Problem :

I want to hide the parent of a nested list while keeping the nested list visible. In addition, I do not want the parent to take up any space on the page when it is hidden.

HTML

<ul>
    <li class="parent">Menu
        <ul class="nested">
            <li>About</li>
        </ul>
    </li>
</ul>

CSS Attempt 1

.parent {
    display: none;
}
.nested {
    display: block;
}

I could not get the nested items to show using this method.

CSS Attempt 2

.parent {
    visibility: hidden;
}
.nested {
    visibility: visible;
}

The parent still took up space on the page, even though you could not see it.

Is there a third option or will I have to use visibility and change the margins on the nested list?

A similar question was asked here how to hide parent div, keeping inner div visible? but I want to make sure that there isn't a more appropriate/accurate answer than the ones proposed there (e.g. move one element out of the other) and here (use visibility).



Solution :

As @paulie_D has mentioned in the comments above, you can't achieve this with CSS although you can use JavaScript to pull the element out or duplicate it and then show it. Here's an example:

var element = jQuery('.nested').clone();
element.appendTo('ul');
.parent {
  display: none;
}
<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 am cloning .nested using the jQuery .clone() function and appending it to the only visible item on the page i.e. the <ul>. You can also append it to any other visible item on your page as per your wish.


    CSS Howto..

    how to remove the border from the last list item and select :nth-child (multiple items)

    CSS - How to set many div width with a non-round percentage to fill a parent div space

    How to put a border on a triangle shape using css?

    How can I use webpack to copy files to the distribution folder?

    css how to make the button in the middle of this code [closed]

    How can I get horizontal overflows to work in CSS?

    How to center 2 or more divs on the same line? (css)

    How to snap divs together vertically in CSS like Pinterest have

    How to implement two sets of CSS Tabs on one page?

    How to draw a diagonal line with GWT or HTML+CSS+JavaScript?

    How can I apply CSS to a JPG server-side?

    How to modify twitter widget in css

    How does CSS float work when applied to an “ul” element

    How to create a “shiny” effect like this using CSS gradients?

    How to change default comments pattern in Atom (specifically for CSS)

    How to change the width of css tab according to length of alphabet?

    Displaying the first in simple Show / Hide content menu with active a

    How do you select a security authentication modal with a css selector?

    How to define text spacing in input in css

    How to highlight 3 line toggle button when i hover?

    Show/hide css class by url parameter with php

    How to use css to style xhtml markup made only of divs like a table [closed]

    How to allow my CSS slide out element to push its neighboring content?

    How do I get the element after my horizontal css navigation bar to appear below it?

    How to make CSS sourcemapping work in Chrome with Compass (SASS)

    I want to apply an existing CSS style to all labels on a page. How?

    How to Fix: iOS drops CSS files when javascript changes DOM

    Styling Tables - How to use column groups to modify TH tag located in that column

    How to prevent CSS declaration dropped errors cross browser?

    c# cassette - how to create different css bundles for different pages