A simple css code that makes your wordpress navigation to support multilevel navigation with dropdown sub menus

wp-multi-level-navigation.css

/* This is just a simple block of code but if you want to see more explaination
 pleae visit my blog at http://gamier.blogspot.com/2016/02/how-to-make-wordpress-multi-level.html
*/

.menu-item-has-children > .sub-menu {
  display: none;
  color:#fff;
  position: relative;
  z-index: 100;
}
.ab-nav > .menu-item-has-children:hover:after{
  content: " "
}
.sub-menu li{
    position: relative;
    width:100%;
}
.menu-item-has-children > .sub-menu a {
    color:#fff;
}
.menu-item-has-children > .sub-menu a:hover {
    text-decoration: none;
    background-color: #434343;
}
.menu-item-has-children > .sub-menu > .menu-item-has-children:after{
content:">";font-family:fontawesome;display:block;text-align:center; color:#fff;float:right;top:10px; position: absolute; right: 15px;
}
.menu-item-has-children > .sub-menu > .menu-item-has-children > .sub-menu {
    position: absolute;
    left: 100%;
    top: 0;
    width: 200px;
    z-index: 100;
}
.menu-item-has-children:hover > .sub-menu {
  display: block;
  background-color: rgba(27, 27, 27, 0.95);
  list-style: none;
  padding: 0;
  margin: 0;
  position: absolute;
  width: 200px;
  z-index: 100;
}
.menu-item-has-children .sub-menu li a{
      padding: 10px 15px;
      display: block;
}