Mettre une icône de l'élément de liste avec :après et la police impressionnant

Je vais avoir un problème pour obtenir l'icône apparaisse directement après un élément de liste dans un ul à l'aide de la police génial et :after.

La li avec la classe devrait avoir l'icône d'après elle, mais quand un autre ul est ajouté avant la fermeture de l'élément de la liste, il met l'icône de l'ensemble de la liste secondaire.

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

Je ne peux pas pour la vie de me comprendre ce que je fais de mal.

Voici mon jsfiddle

Merci d'avance!!

Qu'attendez-vous pour arriver à la place? Lorsque vous ajoutez que le deuxième <ul> à l'intérieur du haut <li>, la totalité de l'intérieur de la liste devient une partie de parent de l'élément de liste. Il fait exactement ce que vous dites aussi, c'est mettre de la flèche directement après la <li>. Voulez-vous aller après le "Intégrée des zones Côtières Gestion des bassins versants Plans de texte" à la place?

OriginalL'auteur tyler_lisa | 2013-09-13

  1. 47

    Comme je l'ai mentionné dans le commentaire:

    "Quand vous ajoutez que le deuxième <ul> à l'intérieur du haut <li>, la totalité de l'intérieur de la liste devient une partie de parent de l'élément de liste. Il fait exactement ce que vous dites aussi, c'est mettre de la flèche directement après la <li>."

    Si vous voulez l'icône pour aller après la lecture du texte "Intégrée des zones Côtières Gestion des bassins versants Plans" au lieu de cela, ajouter un span autour de ce titre et de modifier votre CSS pour ajouter le :after pseudo-élément qui s'étendent au lieu de l'ensemble de la <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;

}

    Voici une mise à jour du violon.

    Ahhhh...oui, c'est ce dont j'avais besoin. Merci @Jason.

    OriginalL'auteur Jason