CSS TRICKS APPLIED ON BOOTSTRAP MENU: NO JQUERY

How we can apply css on bootstrap menu to make it attractive : NO Jquery

by Joe Cisneros

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
     <div class="navbar-x">
            <div class="container">
                <ul class="nav nav-pills">
                    <li  class="active">
                        <a href="#">Home</a>
                    </li>
                    <li>
                        <a href="#">Next</a>
                    </li>
                    <li>
                        <a href="#">Activity</a>
                    </li>
                    <li>
                        <a href="#">Calendar</a>
                    </li>
                    <li>
                        <a href="#">Profile</a>
                    </li>
                    <li class="bottom-bar"></li>
                </ul>
            </div>
        </div>

CSS

body {
  background: #333;
  width: 98% !important;
}

.navbar-x {
  text-align: center;
}

.navbar-x .nav {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.navbar-x .nav:hover.nav-pills > li.active > a, .navbar-x .nav:focus.nav-pills > li.active > a {
  color: #eee;
}

.navbar-x .nav:hover.nav-pills > li.active > a:hover, .navbar-x .nav:hover.nav-pills > li.active > a:focus, .navbar-x .nav:focus.nav-pills > li.active > a:hover, .navbar-x .nav:focus.nav-pills > li.active > a:focus {
  color: #FFCB00;
  background-color: inherit;
}

.navbar-x .nav > li > a {
  width: 94px;
  color: #eee;
  transition: color 0.42s ease-in-out;
}

.navbar-x .nav > li > a:hover, .navbar-x .nav > li > a:focus {
  color: #FFCB00;
  background-color: inherit;
}

.navbar-x .nav > li.active > a {
  color: #FFCB00;
  background-color: inherit;
}

.navbar-x .nav > li.bottom-bar {
  transition: left 0.42s ease-in-out;
  position: absolute;
  height: 3px;
  width: 90px;
  bottom: 0;
  background-color: #ebbf00;
}

.navbar-x .nav > li:nth-child(1).active ~ .bottom-bar {
  left: 0px;
}

.navbar-x .nav > li:nth-child(1):hover ~ .bottom-bar, .navbar-x .nav > li:nth-child(1):focus ~ .bottom-bar {
  left: 0px !important;
}

.navbar-x .nav > li:nth-child(2).active ~ .bottom-bar {
  left: 100px;
}

.navbar-x .nav > li:nth-child(2):hover ~ .bottom-bar, .navbar-x .nav > li:nth-child(2):focus ~ .bottom-bar {
  left: 100px !important;
}

.navbar-x .nav > li:nth-child(3).active ~ .bottom-bar {
  left: 200px;
}

.navbar-x .nav > li:nth-child(3):hover ~ .bottom-bar, .navbar-x .nav > li:nth-child(3):focus ~ .bottom-bar {
  left: 200px !important;
}

.navbar-x .nav > li:nth-child(4).active ~ .bottom-bar {
  left: 300px;
}

.navbar-x .nav > li:nth-child(4):hover ~ .bottom-bar, .navbar-x .nav > li:nth-child(4):focus ~ .bottom-bar {
  left: 300px !important;
}

.navbar-x .nav > li:nth-child(5).active ~ .bottom-bar {
  left: 400px;
}

.navbar-x .nav > li:nth-child(5):hover ~ .bottom-bar,...