JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav">
    <ul>
      <div id="home"><li><a href="#home">Home</a></li></div>
      
      <li id="item2"><a href="#news">item2</a></li>

      <li id="item3"><a href="#bio">item3</a></li>
      <li id="item4" style="border:none"><a href="#contact">item4</a></li>
      
    </ul>
  </div>

CSS

#nav {
	font: 30px 'LeagueGothicRegular', Arial, sans-serif;
	color: #f9f8cc;

	width:450px;
	clear: both;
	height: 56px;
	margin: 0px 0px 0px 50px;
	background:#c2c2c2;
}

#nav ul {
	margin: 0;
	padding: 0;
}
#nav li {
	list-style-type: none;
	background-image: transparent;
	color: #FDE99D;
	float: left;
	height:50px; width:100px;
	border-right:1px #900 solid;
	text-align:center;
		
}

#nav li a {
	/**padding:10px 20px 10px 16px;**/
	color: #000;
	text-shadow: 0px 2px 2px #222;
	text-transform: uppercase;
}

#nav li a:hover {
	color: #999;
	color:transparent !important;
	text-shadow: none;
}

#nav li:hover {
	background:url(http://cdn1.iconfinder.com/data/icons/duesseldorf/32/home.png) red; 
	background-size: 83px 56px; 
	color: #999;
	color:transparent !important;
	text-shadow: none;
}