2015-11-12 5 views
4

У нас есть субнавигация с несколькими элементами UL с li с элементами UL в нем.Проверьте, есть ли у ul

Рассмотрим следующий пример:

<ul> 
    <li> <a href="#">link level 1</a> 

     <ul> 
      <li> <a href="#">link level 2</a> 

      </li> 
      <li> <a href="#">link level 2</a> 

       <ul> 
        <li> <a href="#">link level 3</a> 

        </li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul> 

Нам нужна стрелка за все теги якоря, за исключением уровня 3.

теперь у меня есть следующие CSS, но это только показывает значок стрелка позади уровень 2.

ul { 
    padding:20px 0 0 0; 
    ul { 
     padding: 0; 
     margin-left: 13px; 
     & > li { 
      list-style-type: none; 
      & > a:not(:last-child):after { 
       margin-top:3px; 
       content:"\E259"; 
       font-family:'Glyphicons Halflings'; 
       text-align:right; 
       font-size: 10px; 
       float:right; 
      } 
     } 
    } 
} 

Это рисует значок, где a не является последним элементом. Но нам также нужно иметь стрелку за уровнем 1, который согласно этому CSS является последним элементом, поэтому значок стрелки не нарисован.

Как мы можем решить это?

+0

Пожалуйста, предоставьте jsfiddle. – Alex

+0

Я понятия не имею, что вы подразумеваете под этим. –

+0

Пожалуйста, напишите демоверсию, на которой показана ваша проблема. Проверьте [это] (http://jsfiddle.net/) – Alex

ответ

3

Вам необходимо обновить ваш МЕНЬШЕ, чтобы (обратите внимание, я обновил содержание шрифта &, так что я не должен импортировать шрифт таблица символов):

ul { 
    padding:20px 0 0 0; 
    & > li { 
      list-style-type: none; 
      & > a:not(:last-child):after { 
       margin-top:3px; 
       content:">"; 
       font-family:'arial'; 
       text-align:right; 
       font-size: 10px; 
       float:right; 
      } 
     } 
    ul { 
     padding: 0; 
     margin-left: 13px; 
    } 
} 

Обратите внимание, что «>» находится в в правой правой части окна вывода. См. Рабочий пример здесь: https://jsfiddle.net/6duxLkc4/

+0

избили меня, хорошо сделано – Luciano

+0

Пришло время разобраться, как использовать LESS в jsfiddle. Для справки ознакомьтесь с этой скрипкой с инструкциями: http://jsfiddle.net/T2Xe9/ Обратите внимание на ссылки на внешние ресурсы less.min.js (это та часть, которая не указана в инструкциях!) –

+0

Это сделало трюк! –

Смежные вопросы