在.tag文件中嵌入CSS

Question

当您将鼠标悬停在其上时，我有一张图像会弹出另一张图片：http://jsfiddle.net/2xDBP/

这在jsfiddle中运行正常，所以在我的datatable.tag文件的render标签中，我将整个东西作为字符串返回。当我去我的网站测试时，当我将鼠标悬停在它上面时没有任何反应。所以我想知道这是一种将css嵌入到JSP中的正确方法，或者我应该创建另一个文件并链接它们。

<c:if test="${includeThumbnail=='true'}">
        <d:column sortable="false" columnsView="BOTH">
            <d:label><hza:string id="THUMBNAIL"/></d:label>
            <d:data>thumbnail</d:data>
            <d:render>
               return "<div class='thumbnail'>
<style>
    div.thumbnail li{
display:inline-block; /*places the images in a line*/
position: relative;
z-index: 0; /*resets the stack order of the list items - later we'll increase this*/
margin:10px 40px 0 20px;
}
div.thumbnail img{
background-color:#eae9d4;
padding: 6px;
-webkit-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
-moz-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
box-shadow: 0 0 6px rgba(132, 132, 132, .75);
-webkit-border-radius: 4px; 
-moz-border-radius: 4px; 
border-radius: 4px; 
}
div.thumbnail span{
position:absolute;
left: -9999px;
background-color:#eae9d4;
padding: 10px;
font-family: 'Droid Sans', sans-serif;
font-size:.9em;
text-align: center; 
color: #495a62; 
-webkit-box-shadow: 0 0 20px rgba(0,0,0, .75));
-moz-box-shadow: 0 0 20px rgba(0,0,0, .75);
box-shadow: 0 0 20px rgba(0,0,0, .75);
-webkit-border-radius: 8px; 
-moz-border-radius: 8px; 
border-radius:8px;
}
div.thumbnail li:hover{
z-index: 50;
cursor:pointer;
}
div.thumbnail span img{
padding:2px;
background:#ccc;
}
div.thumbnail li:hover span{ 
top: 0px; /*the distance from the bottom of the thumbnail to the top of the popup image*/
left: -20px; /*distance from the left of the thumbnail to the left of the popup image*/
}
div.thumbnail li:hover:nth-child(2) span{
left: 100px; 
}
div.thumbnail li:hover:nth-child(3) span{
left: -200px; 
}
</style>
<li>
<img src='http://cssdemos.tupence.co.uk/assets/image-enlarge01-sml.jpg' width='150px' height='100px' alt='Deckchairs' /> <!--thumbnail image-->
<span> <!--span contains the popup image-->
<img src='http://cssdemos.tupence.co.uk/assets/image-enlarge01.jpg' alt='Deckchairs' /> <!--popup image-->
<br />Deckchairs on Blackpool beach <!--caption appears under the popup image-->
</span>
</li>
</div>";
            </d:render>