子元素乘以给定的参数

Question

所以我不认为这个问题真的很复杂，只是我很愚蠢。我希望我的子菜单项目的尺寸更小，这可以通过边距或填充来完成，但问题是那里我的子子菜单是参数x2 让我说我给父母20px的边距，子子菜单将是40 px; / 这是我在说什么的图片：Click 这是我的CSS和HTMl

PS：我正在使用wordpress，它正在使我的菜单自动生成，我将尝试用HTML代码表示它，因为在wordpress中它的PHP并且你将无法看到Ul和Li的。

.tablet-menu{
display:none;
background:#000;
position:fixed;
width:100%;
height:100%;
opacity:0.7;
z-index:1001;
  -webkit-transition: all 0.8s ease-in-out;
  -moz-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
  -webkit-transition-delay: 0.2s;
  -moz-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
.tablet-menu.show{
display:block;
}
.tablet-menu.hide{
display:none;
}
.tablet-menu ul{
position:relative;
width:100%;
text-align:center;
padding:0;
margin:0;
}
.tablet-menu li{
color:#FFF;
background:#000;
}
.tablet-menu li a{
text-transform: uppercase;
font-family: "Roboto Slab", Times, Georgia, serif;
font-weight:bold;
border-radius:2px;
border-bottom:1px solid white;
position:relative;
display:block;
padding-top:4%;
padding-bottom:4%;
}
.tablet-menu ul li ul{
display:none;
}
.tablet-menu li:hover *.sub-menu{
display:block;
margin-left:20px;
margin-right:20px;
}
.tablet-menu li:last-child{
border:none;
}
.tablet-menu li > a:after{
content: "\33";
font-family: "ElegantIcons";
}
.tablet-menu li a:only-child:after, .tablet-menu li li a:after{
content:"";
}
.tablet-menu li a:hover{
background:#fff;
color:#000;
}

   <div class="tablet-menu">
      <ul class="tablet-menu-ul">
         <li><a>Front Page </a></li>
          <li><a>test1 </a></li>
           <ul class="sub-menu">
             <li><a>test2</a>
               <ul class="sub-menu">
                 <li><a></a>
                   </li>
               </ul>
             </li>
            </ul>
           <li><a>test3 </a></li>
           <li><a>test4 </a></li>
           <li><a>test5 </a></li>
         </ul>
     
     </div>