I am having a problem getting the icon to appear directly after a list item in a ul using font awesome and :after.
The li with the active class should have the icon after it but when another ul is added in before closing the list item, it's puts the icon after the entire secondary list.
<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>
I can't for the life of me figure out what I am doing wrong.
Thanks in advance!!
<ul>
inside the top<li>
, that entire inside list becomes part of the parent list item. It's doing exactly what you're telling it too, it's putting the arrow directly after the<li>
. Do you want it to go after the "Integrated Coastal Watershed Management Plans" text instead? – Jason Sep 13 '13 at 19:08