javascript - <li> tags are getting stacked while using mmenu -

i using mmenu jquery library making mobile menu on site. copy pasted exact implementation code inside website , mmenu working <li> rows inside menu getting stacked on each other. believe css rules of mmenu <nav> inherting css rules container div. stacking of rows inside menu happening when tried using basic examples mentioned on mmenu site (my implementation ahead).

please me in resolving issue.

actual mmenu example can found here

screenshot of implementation:

<nav id="menu">     <ul>         <li>             <a href="#/">                 <i class="fa fa-home"></i>                  home                 </a>         </li>         <li>             <a href="#/about">                 <i class="fa fa-user"></i>                              </a>         </li>         <li>             <a href="#/contact">                 <i class="fa fa-envelope"></i>                  contact             </a>         </li>     </ul> </nav> 

jquery(document).ready(function($) {     $("#menu").mmenu({         extensions: [              "theme-black",              "effect-menu-zoom",              "effect-panels-zoom",              "pagedim-black"          ],         navbar: false,         navbars: {             height: 4,             content: [                  '<a href="#/" class="fa fa-phone"></a>',                 '<img src="http://lorempixel.com/60/60/people/1/" />',                 '<a href="#/" class="fa fa-envelope"></a>'             ]         }     }).on('click', 'a[href^="#/"]', function() {         alert("clicked");         return false;     }); }); 

.mm-menu {     background: #440011 !important; } .mm-navbar {     text-align: center;     position: relative;     border-bottom: none; } .mm-navbar:before {     content: "";     display: inline-block;     vertical-align: middle;     height: 100%;     width: 1px; } .mm-navbar > * {     display: inline-block;     vertical-align: middle; } .mm-navbar img {     border: 1px solid rgba(255, 255, 255, 0.6);     border-radius: 60px;     width: 60px;     height: 60px;     padding: 10px;     margin: 0 10px; } .mm-navbar {     border: 1px solid rgba(255, 255, 255, 0.6);     border-radius: 40px;     color: rgba(255, 255, 255, 0.6) !important;     font-size: 16px !important;     line-height: 40px;     width: 40px;     height: 40px;     padding: 0; } .mm-navbar a:hover {     border-color: #fff;     color: #fff !important; } .mm-listview {     text-transform: uppercase;     font-size: 12px; } .mm-listview li:last-child:after {     content: none;     display: none; } .mm-listview li:after {     left: 20px !important;     right: 20px !important; } .mm-listview {     text-align: center;     padding: 30px 0 !important; } .mm-listview a, .mm-listview .fa {     color: rgba(255, 255, 255, 0.6); } .mm-listview a:hover, .mm-listview a:hover .fa {     color: #fff; } .mm-listview .fa {     position: absolute;     left: 20px; }  html.mm-opened.mm-effect-zoom-menu body {     background: #f3f3f3; } html.mm-opened.mm-effect-zoom-menu.mm-theme-dark body {      background: #333; } html.mm-opened.mm-effect-zoom-menu.mm-theme-black body {     background: #000; } html.mm-opened.mm-effect-zoom-menu.mm-theme-white body {     background: #fff; } html.mm-opened.mm-effect-zoom-menu .mm-page {     background-color: #fff; }  .mm-menu li .fa {     margin: 0 20px 0 5px;     font-size: 16px;     width: 12px; } .mm-menu li[class*="mm-tile"] .fa {     margin: 0;     line-height: 0; }  .mm-menu .buttonbar-item:after {     content: none !important;     display: none !important; } 

edits after removing position:absolute ,as guided in answers ,i getting <li> in single row

you're giving links fa class, positioning them absolutely. container isn't positioned relatively, they're reading screen.

        .mm-listview .fa {             position: absolute;             left: 20px;         }