Поместите значок после элемента списка с помощью: after и font awesome

У меня возникла проблема с тем, чтобы значок отображался непосредственно после элемента списка в ul с использованием шрифта awesome и: after.

У ли с активным классом должен быть значок после него, но когда добавляется еще одна добавка, перед закрытием элемента списка он помещает значок после всего вторичного списка.

<div id="thirdLevMenu">
<ul>
<li class="active">Integrated Coastal Watershed Management Plans
<ul>
<li><a href="#" onclick="location.href='http://design-irwmp3.migcom.com/app_pages/view/7931'; return false;">Russian River Integrated Coastal Watershed Management Plan</a></li>
<li><a href="#" onclick="location.href='http://design-irwmp3.migcom.com/app_pages/edit/http:/www.goldridgercd.com/watersheds/salmoncreekplan.html'; return false;" target="_blank">Salmon Creek Coastal Watershed Management Plan</a></li>
<li><a href="#" onclick="location.href='http://design-irwmp3.migcom.com/app_pages/edit/http:/www.mattole.org/plan'; return false;" target="_blank">Mattole Coastal Watershed Management Plan</a></li>
<li><a href="#" onclick="location.href='http://design-irwmp3.migcom.com/app_pages/edit/http:/www.trinidad.ca.gov/documents-library/category/30-icwmp.html'; return false;" target="_blank">Trinidad-Westhaven Coastal Watershed Management Plan</a></li>
</ul>
</li>
</ul>
</div>

Я не могу для жизни меня понять, что я делаю неправильно.

Здесь мой jsfiddle

Спасибо заранее!

Ответ 1

Как я упоминал в комментарии:

"Когда вы добавляете второй <ul> в верхний <li>, весь внутренний список становится частью элемента родительского списка. Он делает именно то, что вы тоже говорите, он помещает стрелку непосредственно после <li>".

Если вы хотите, чтобы значок отображался после текстового показания "Integrated Coastal Watershed Management Plans", добавьте пробел вокруг этого заголовка и настройте свой CSS, чтобы добавить псевдо-элемент :after в этот диапазон, а не весь <li>.

HTML

<li class="active">
 <span class = "title">Integrated Coastal Watershed Management Plans</span>

 ...
</li>

CSS

#thirdLevMenu ul li.active .title:after{ 
   content: '\f0da';
   font-family: FontAwesome;
   font-weight: normal;
   font-style: normal;
   margin:0px 0px 0px 10px;
   text-decoration:none;

}

Здесь обновленная скрипка.