Question: I've got a vertical nav-menu on which I have parent and non-parent items. I want parents to reveal their children pages when hovered on and I want this to push down the items above. 
HTML:

```
<nav class="main">
    <ul>
        <li>
            <a href="">Lorem</a>
            <ul>
                <li><a href="">Ipsum</a></li>
                <li><a href="">Dolor</a></li>
                <li><a href="">Sit</a></li>
                <li><a href="">Amet</a></li>
            </ul>
        </li>
        <li>Something</li>
    </ul>
</nav>

```

CSS:

```
nav.main ul ul {
    display: none
}

nav.main ul li:hover ul {
    display: block;
}

```

However when the mouse leaves the parent item, children disappear and the menu changes which is disturbing because the pointer of the mouse is suddenly on a different item (for example: mouse moves from "Amet" to "Something"). So what I did is use a smooth transition but in that case 'display' doesn't work anymore and 'visibility' doesn't push down the children, they just appear as a second layer on the menu. In the example here <https://jsfiddle.net/LgvhLxya/1/> I'd like the item "Something" to be pushed down when the children of "Lorem" are revealed.

Answer: 
Well there is no need of using `position:absolute` on `ul`, as you are using that thus it is creating another layer of `menu`. You have used `css hover selector`, which works or `performs` certain `styling` till your `mouse` is on targeted `element` as soon as it goes out-of range it hide `lorem li` elements `something` come-up, so to solve this you can use jQuery `click` event listener as below,

Check this [jsFiddle](https://jsfiddle.net/e1mcff9a/).

And if you just need to perform `transition` on `ul` tag then use `visibility`. As `transition` won't work with `display`.

```css
nav.main > ul > li > ul {
  display: block;
  height:0px;
  visibility:hidden;
  opacity:0;
  transition:0.2s ease;
}

nav.main > ul  > li:hover > ul {
  height:80px;
  visibility:visible;
  opacity:1;
}
```

```html
<nav class="main">
    <ul>
        <li>
            <a href="">Lorem</a>
            <ul>
                <li><a href="">Ipsum</a></li>
                <li><a href="">Dolor</a></li>
                <li><a href="">Sit</a></li>
                <li><a href="">Amet</a></li>
            </ul>
        </li>
        <li><a href="">Something</a></li>
        <li><a href="">Something</a></li>
        <li><a href="">Something</a></li>
    </ul>
</nav>
```
CSS

```css
nav.main ul ul {
    height: 0;
    box-sizing: border-box;
    list-style: none;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    //padding: 10px;
    background-color: rgba(92, 91, 87, 0.9);
    -webkit-transition: opacity 600ms, height 600ms;
            transition: opacity 600ms, height 600ms;
}

nav.main ul li:hover ul {
    height: auto;
    visibility: visible;
    opacity: 1;
}

nav.main ul li:hover ul {
   padding-left: 10px;
}

nav.main ul li:hover ul a {
   color: #fff;
}
```

```html
<nav class="main">
    <ul>
        <li>
            <a href="">Lorem</a>
            <ul>
                <li><a href="">Ipsum</a></li>
                <li><a href="">Dolor</a></li>
                <li><a href="">Sit</a></li>
                <li><a href="">Amet</a></li>
            </ul>
        </li>
        <li>Something</li>
    </ul>
</nav>
```

JSFiddle [example](https://jsfiddle.net/0rswp5Lj/)