JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css">
<div id="thirdLevMenu">
<ul>
    <li class="active"><span class = "title">Integrated Coastal Watershed Management Plans</span>
<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>

CSS

#thirdLevMenu {
   margin: 1em 10px 1em 20px;
   padding: 0px;   
   width: 216px;
}


#thirdLevMenu ul {
	padding: 0px;
	margin: 0px;
	list-style: none;
	background-color:#B8C58F;
}

#thirdLevMenu ul li { 
	padding:10px;
	font-size:1.1em;
	margin: 0px;		        
    text-decoration: none;
    text-transform:uppercase;
	font-family: "proxima-nova", Arial, Helvetica, Verdana, sans-serif;
	font-weight:600;
	letter-spacing:1px;
	line-height:16px;
}

#thirdLevMenu ul li.active { 
    color: #fff;
	font-weight:700;

}


#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;

}  

#thirdLevMenu ul li a:hover { 		        
    text-decoration: underline;
	color:#FFF;
}

#thirdLevMenu li a { 
   margin: 0px;
   border: none;
   display: block;
   color: #333;			        
   text-decoration: none;
   text-transform:uppercase;
}

#thirdLevMenu li li { 
    padding:10px 10px 10px 0px;
	margin: 0px 0px 0px 10px;
	border-bottom:1px dashed #839055;
}

#thirdLevMenu li li.active { 
    color: #fff;	
	text-transform:none;
    font-weight:bold;
	text-transform:none;
    font-family: Arial, Helvetica, Verdana, sans-serif;
    font-size:12px;
    letter-spacing:0px;
}



#thirdLevMenu li li a{ 
	color:#333;
	text-transform:none;
    font-family: Arial, Helvetica, Verdana, sans-serif;
    font-weight:normal;
    font-size:12px;
    letter-spacing:0px;
}

#thirdLevMenu li li a:hover{ 
	text-decoration:underline;
	color:#FFF;
}


#thirdLevMenu li li li { 
    padding:5px 10px 5px 0px;
	margin: 0px 0px 0px 10px;
border-bottom:none;
}





#thirdLevMenu li li li a{ 
	color:#5a721a;
	text-transform:uppercase;
    font-family: Arial, Helvetica, Verdana, sans-serif;
    font-weight:normal;
    font-size:11px;
    letter-spacing:0px;
}

#thirdLevMenu li li li a:hover{ 
	text-decoration:underline;
	color:#FFF;
}

#thirdLevMenu li li li.active { 
    color:...