Here in my css I have given style padding(1.5rem,3rem,4.5rem,6rem) to its LI's by each nesting, but this is something hard coded, my nesting can go to N numbers, so this approach i can not use, Is there was better approach i can handle this with CSS ?
.parent ul { list-style: none; padding: 0; margin:0 }
li { margin:0; padding: 0; cursor:pointer}
li a {display: block;}
.container ul a {padding-left:1.5rem}
.container ul ul a {padding-left:3rem}
.container ul ul ul a {padding-left:4.5rem}
.container ul ul ul ul a {padding-left:6rem}
li a:hover {
background:green;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="container">
<ul class="parent" id="Head">
<li class="items"><a><span>AAA</span></a></li>
<li class="items">
<div class="group"><a><span>BBBB</span></a> </div>
<ul class="group-item">
<li class="items"><a><span>bbbbb</span></a></li>
<li class="items"><a><span>bbbbb</span></a></li>
</ul>
</li>
<li class="items">
<div class="group"><a><span>CCCC</span></a></div>
<ul class="group-item">
<li class="items"><a><span>cccc</span></a></li>
<li class="items"><a><span>cccc</span></a></li>
<li class="items">
<div class="group"> <a><span>cccc</span></a> </div>
<ul class="group-item">
<li class="items"><a><span>cccc1</span></a></li>
<li class="items"><a><span>cccc1</span></a></li>
<li class="items">
<div class="group"> <a><span>cccc1</span></a> </div>
<ul class="group-item">
<li class="items"><a><span>cccc2</span></a></li>
<li class="items"><a><span>cccc2</span></a></li>
<li class="items"><a><span>cccc2</span></a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</div>
</body>
</html>Looks Only solution left is using javascript
var parents = document.getElementsByClassName('parent');
var allUls= parents[0].querySelectorAll('ul');
allUls.forEach(function(x,i){
var i = i+1;
var y = x.querySelectorAll('.sid');
y.forEach(function(x1){
x1.style.paddingLeft = 1.5 * i+'rem';
})
})ul { list-style: none; padding: 0; margin:0 }
li { margin:0; padding: 0; cursor:pointer}
li a {display: block;}
li a:hover {
background:red;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="container">
<ul class="parent" id="Head">
<li class="items"><a class="sid"><span>A</span></a></li>
<li class="items">
<div class="group"><a class="sid"><span>B</span></a> </div>
<ul class="group-item">
<li class="items"><a class="sid"><span>b</span></a></li>
<li class="items"><a class="sid"><span>b</span></a></li>
</ul>
</li>
<li class="items">
<div class="group"><a class="sid"><span>C</span></a></div>
<ul class="group-item">
<li class="items"><a class="sid"><span>c</span></a></li>
<li class="items"><a class="sid"><span>c</span></a></li>
<li class="items">
<div class="group"> <a class="sid"><span>c</span></a> </div>
<ul class="group-item">
<li class="items"><a class="sid"><span>c1</span></a></li>
<li class="items"><a class="sid"><span>c1</span></a></li>
<li class="items">
<div class="group"> <a class="sid"><span>c1</span></a> </div>
<ul class="group-item">
<li class="items"><a class="sid"><span>c2</span></a></li>
<li class="items"><a class="sid"><span>c2</span></a></li>
<li class="items"><a class="sid"><span>c2</span></a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</div>
</body>
</html>