Question: I'm looking for `observable` operator that after emitting value will wait for 500ms. 
If new value is emitted in that time it takes the new value and forget last. 
If no new value is emitted it passes this value further. 

I tried:
`delay` - it only delays *every* value
`debounceTime` - it creates gaps between values and emits every one.

Answer: 
The answer I needed was supplied by Pete as a comment (hence I can't mark it as correct answer). 

Solution was to abandon floats, and use column-count instead. I also added "inline-block" to the child element to avoid a column break within an element as per [How to prevent column break within an element?](https://stackoverflow.com/questions/7785374/how-to-prevent-column-break-within-an-element) . 

```css
ul {
  list-style:none;
  margin: 0;
  padding: 0;
  column-count:2;
  column-gap:0;
}

li {
  margin: 0;
  padding: 0; 
}

a {
  color: #fff;
}

#container {
  width: 400px;
}

#container li {
  width: 200px;
  background: blue;
  display: inline-block;
}

#container .level3 {
background: green;
height: 100px;
overflow: visible;
width: 200px; 
}

#container .level3 li {
  background: black;
  opacity: 0.5;
}
```

```html
<ul id="container">

  <li><a href="#">Level 2</a>
    <ul class="level3">
      <li><a href="#">Level 3</a></li>
    </ul>
  </li>

 <li><a href="#">Level 2</a></li>

 <li><a href="#">Level 2</a></li>

 <li><a href="#">Level 2</a>
    <ul class="level3">
      <li><a href="#">Level 3</a></li>
    </ul>
  </li>

 <li><a href="#">Level 2 THIS</a></li>

 <li><a href="#">Level 2</a>
    <ul class="level3">
      <li><a href="#">Level 3</a></li>
   </ul>
  </li>

</ul>
```

Thank you!
why don't you try this, it is clean and it can be as nested as you want,
credits goes to: <https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_dropdown_multilevel_css&stacked=h>

```
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
}
</style>
</head>
<body>

<div class="container">
  <h2>Multi-Level Dropdowns</h2>
  <p>In this example, we have created a .dropdown-submenu class for multi-level dropdowns (see style section above).</p>
  <p>Note that we have added jQuery to open the multi-level dropdown on click (see script section below).</p>                                        
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a tabindex="-1" href="#">HTML</a></li>
      <li><a tabindex="-1" href="#">CSS</a></li>
      <li class="dropdown-submenu">
        <a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
          <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
          <li class="dropdown-submenu">
            <a class="test" href="#">Another dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">3rd level dropdown</a></li>
              <li><a href="#">3rd level dropdown</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

<script>
$(document).ready(function(){
  $('.dropdown-submenu a.test').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});
</script>

</body>
</html>

```