CSSで無限のネストされたリストをユニークなスタイルにするにはどうすればよいですか？

Question

たとえば、これらのコード。

.sidebar-nav .metismenu ul a { 
    padding: 10px 15px 10px 30px; 
} 
.sidebar-nav .metismenu ul ul a { 
    padding: 10px 15px 10px 45px; 
} 

私は追加の（任意の量）に必要<ul>は左詰めに追加15pxを持っています。これを手動で入力するのではなく、どうすれば実現できますか？

Answer 1

私はあなたの質問を理解するので、各ネストされたリストを親よりもインデントしたいと思っていますか？

ここでは、ulにパッドを配置しました。これは、各リストをその親に対して15pxインデントします。

.sidebar-nav .metismenu { 
 
    position: relative; 
 
} 
 

 
.sidebar-nav .metismenu ul { 
 
    padding-left: 15px; 
 
} 
 

 
.sidebar-nav .metismenu ul a { 
 
    padding: 10px 15px 10px 0; 
 
    display: block; 
 
    width: 100%; 
 
    color: #ADB5BD; 
 
    cursor: pointer; 
 
} 
 

 
.sidebar-nav .metismenu ul a:hover { 
 
    color: #F8F9FA; 
 
} 
 

 
.sidebar-nav .metismenu ul a:before { 
 
    content: ""; 
 
    opacity: 0; 
 
    transition: 0.3s opacity ease-out; 
 
} 
 

 
.sidebar-nav .metismenu ul a:hover:before { 
 
    position: absolute; 
 
    left: 0; 
 
    width: 100%; 
 
    background: #0B7285; 
 
    height: 3em; 
 
    z-index: -1; 
 
    opacity: 1; 
 
    transition: 0.3s opacity ease-out, 0.3s color ease-out; 
 
    transform: translateY(-1em); 
 
}

<div class="sidebar-nav"> 
 
    <div class="metismenu"> 
 
    <ul> 
 
     <li><a>Item 1</a> 
 
     <ul> 
 
      <li><a>Sub-item</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a>Item 2</a></li> 
 
     <li><a>Item 3</a> 
 
     <ul> 
 
      <li><a>Sub-item</a></li> 
 
      <li><a>Sub-item</a> 
 
      <ul> 
 
       <li><a>Sub-subitem</a></li> 
 
       <li><a>Sub-subitem</a></li> 
 
       <li><a>Sub-subitem</a></li> 
 
      </ul> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>