html - 使列表项以特定方式相互重叠(顺序)

Question

所以我真的不知道如何用语言来解释这个。但这就是我想要实现的目标

这就是我到目前为止所做的link

ul.quicktabs-tabs li {
  float: left;
  height: 20px;
  margin: 0;  
  margin-right:-20px;
  padding: 0; 
  width:150px;
  background: transparent;
}

ul.quicktabs-tabs li a {
  font-family: inherit;
  margin: 0;
  display: block; 
  padding: 10px 27px 10px 7px;
  text-decoration: none;
  color: #6da648 !important;
  border: 2px solid #6da648;
  border-radius: 6px;
  margin: 0;
  background:#fff;
}
ul.quicktabs-tabs li.active a, ul.quicktabs-tabs li.active a:hover {
  color: #fff !important;
  background-position: right -20px;
  background: #6da648;
}
ul.quicktabs-tabs {
  margin: 0 0 10px 0; 
  font-size: 11px; 
  list-style: none;
  padding: 1px 23px 23px 0;
}

<ul class="quicktabs-tabs">
    <li class="active"><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
</ul>

Answer 1

<li>右边的元素与 <li> 重叠左边的元素。设置z-index和 position类 active 的元素为防止重叠，请调整一些填充和边距。

ul.quicktabs-tabs li {
  float: left;
  height: 20px;
  margin: 0;  
  margin-right:-8px;
  padding: 0; 
  width:150px;
  background: transparent;
}

ul.quicktabs-tabs li a {
  font-family: inherit;
  margin: 0;
  display: block; 
  padding: 10px 27px 10px 12px;
  text-decoration: none;
  color: #6da648 !important;
  border: 2px solid #6da648;
  border-radius: 6px;
  margin: 0;
  background:#fff;
}
ul.quicktabs-tabs li.active a, ul.quicktabs-tabs li.active a:hover {
  color: #fff !important;
  background-position: right -20px;
  background: #6da648;
  z-index: 1000;
  position: relative;
}
ul.quicktabs-tabs {
  margin: 0 0 10px 0; 
  font-size: 11px; 
  list-style: none;
  padding: 1px 23px 23px 0;
}

<ul class="quicktabs-tabs">
    <li><a href="#">Item 0</a></li>
    <li class="active"><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
</ul>