<style>
body { margin: 0; font: .9em lucida grande, helvetica, sans-serif }
header { padding: 1em 1.4em; background: #f3f3f3; border-bottom: 1px solid #ddd }
input { padding: .4em }
li { list-style: none; padding: 1.2em 0; border-bottom: 1px solid #eaeaea; color:rgba(0,0,0,.6); text-shadow:rgba(0,0,0,.2) 2px 6px 5px,rgba(255,255,255,.4) 0 -4px 30px; }
</style>

<header>
<input placeholder=Search autofocus class=search><!-- search.js input -->
</header>

<ul class=search>
<li>JavaScript</li>
<li>Java</li>
<li>jQuery</li>
<li>AngularJS</li>
<li>ReactJS</li>
    <ul>
        <li>Submunu 1</li>
            <ul>
                <li>Submenu 1.2</li>
            </ul>
    </ul>
    <ul>
        <li>Submenu 2</li>
    </ul>
    <ul>
        <li>Submenu 3</li>
    </ul>
<li>Bootstrap</li>
<li>PHP</li>
<li>Python</li>
</ul>

<script>
document.addEventListener("DOMContentLoaded", function() {
  "use strict"

  var style = ""
    + "<style>"
    +   "input.search {"
    +     "-webkit-tap-highlight-color: transparent;"
    +   "}"
    +   ".search .hidden {"
    +     "opacity: 0;"
    +     "pointer-events: none;"
    +   "}"
    +   ".search > * {"
    +     "position: absolute;"
    +     "transition: .5s;"
    +   "}"
    + "</style>"

  document.head.insertAdjacentHTML("beforeend", style)

  var items = document.querySelectorAll(".search > *")
  var itemHeight = items[0].offsetHeight
  var texts = []
  var i = -1
  var len = items.length
  var transform = "transform" in document.body.style ? "transform" : "webkitTransform"

  while (++i < len) {
    texts.push(items[i].textContent.trim())
    items[i].style[transform] = "translateY(" + i*itemHeight +"px)"
  }

  document.querySelector("input.search").addEventListener("input", function() {
    var re = new RegExp(this.value, "i")
    texts.forEach(function(element, index) {
      if (re.test(element)) {
        items[index].classList.remove("hidden")
      }
      else {
        items[index].classList.add("hidden")
      }
      var i = -1
      var position = 0
      while (++i < len) {
        if (items[i].className != "hidden") {
          items[i].style[transform] = "translateY(" + position++ * itemHeight + "px)"
        }
      }
    })
  })
})
</script>