Как сделать эффект наложения вкладок, не используя изображение?

Question

Как перекрыть выбранную вкладку над вкладкой 2-го уровня, используя только CSS?

Это HTML код

<div class="tabcontainer" id="tabcontainer">
    <ul id="tabitemscontainer1">
          <li class="selected"><a href="#">item 1</a>
             <ul class="level2">
                <li><a href="#">sub item 1 </a></li>
                <li> <a href="#">subitem 2</a></li>
             </ul>
          </li>
          <li><a href="#">item2</a></li>
      </ul>
</div>

Я написал этот CSS

#tabcontainer {
height:62px;
position:relative;}

#tabitemscontainer1 > li {
-moz-border-radius:7px 7px 0 0;
background:none repeat scroll 0 0 #F0F7C1;
border-color:#EABF4A;
border-style:solid;
border-width:1px 1px 0;
float:left;
margin-right:2px;
padding:5px 10px 10px;}

#tabcontainer ul li li.selected a, #tabitemscontainer1 > li.selected > a {
color:#AE4329;
font-weight:bold;}

ul.level2 {
background:none repeat scroll 0 0 #F3F8C6;
border:1px solid #EABF4A;
left:0;
padding:6px;
position:absolute;
top:26px;
width:463px;}

#tabcontainer ul li li {
float:left;
padding:0 15px 0 4px;}

и получите почти нормально

Я добавил пример здесь: http://jsbin.com/owana4

альтернативный текст http://shup.com/Shup/374240/110619042-My-Desktop.png

Но мне тоже нужно выполнить это условие. Выбранная вкладка должна перекрывать касание второго уровня.

Как сделать это возможным без использования изображения или JavaScript?

альтернативный текст http://shup.com/Shup/374241/110619313-My-Desktop.png

Answer 1

Попробуйте потянуть ul.level2 на 1 пиксель с отрицательным полем и изменить цвет нижней границы на выбранной вкладке уровня 1 на цвет фона.

li.selected {border-bottom-color: # F3F8C6;border-bottom-width: 1px;} ul.level2 {margin-top: -1px;}

Если в итоге это не сработает, вам может потребоваться настроить z-индексы или добавить некоторые отступы внизу для одного из этих элементов.(Заполнение, потому что два поля, которые находятся напротив друг друга, будут рассматриваться как одно поле со значением, равным большему).

Обратите внимание, что вместо border-bottom-width вы можете просто изменить border-значение ширины в вашем существующем CSS.

Answer 2

1. Код в приведенном выше вопросе имеет class="tabitemscontainer1", но вместо этого CSS имеет #tabitemscontainer1.

   Измените все селекторы CSS на .tabitemscontainer1.

2. Далее, поскольку ul.level2 абсолютно позиционируется, добавьте: z-index: -1; к его CSS.

3. Добавьте:

   .tabitemscontainer1 > li.selected
   {
     border-bottom: none;
   }
   

4. Измените .tabitemscontainer1 > li на:

   .tabitemscontainer1 > li
   {
     -moz-border-radius:   7px 7px 0 0;
     background:           none repeat scroll 0 0 #F0F7C1;
     float:                left;
     margin-right:         2px;
     padding:              5px 10px 10px;
     border:               1px solid #EABF4A;
   }
   

5. Настройте top в ul.level2 s CSS для выравнивания границ.

Answer 3

Попробуйте использовать отрицательное поле слева для элемента 2, чтобы получить для элемента 1 более высокий z-индекс, чем для других вкладок.