移动设备的wordpress子菜单问题

Question

在较小的设备上打开子菜单时，我遇到了问题。子菜单项在下一个菜单项上重叠。以下是我的CSS子菜单：

/* Submenu */
nav .menu li > ul {display: none;}

li:hover > .sub-menu {

display: block;
position: absolute;
background-color: #550486;
}

nav > ul > li:hover .sub-menu {
    display: block;
  }

nav ul li a{
      position: relative;
      display: inline-block;
      font-size: 13px;
      line-height: 40px;
      padding: 0 2em;
      -webkit-transition: all .3s ease;
  }
  nav a:hover{

      background:#e9b647;
      color: #fff;
  } 

并且此代码用于媒体：

/* Landscape phones and down */
  @media (max-width: 480px) {

  nav{

       height: 0;
       overflow: hidden;
      -webkit-transition: all .3s ease;
}
  .menu>li{
        display: inline; }




}

请帮助我解决这个问题。