Untitled

<!DOCTYPE html>
<html>
<head>
<style>
ul#menu {
    padding: 0;
}

ul#menu li {
    display: inline;
}

ul#menu li a {
    background-color: black;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 4px 4px 0 0;
}

ul#menu li a:hover {
    background-color: orange;
}
</style>

<script>
	function callFunction(fruit){
		document.getElementById('myFrame').src="http://en.wikipedia.org/wiki/"+fruit;
		document.getElementById('divMyFrame').style.display='';
		}
</script>
</head>

<%@page import="java.util.*"%>
<%
    int col = 2;
    String title = "List of fruits";
 /*    Map<String, String> fruits = new HashMap<String, String>();

    fruits.put("apple", "apple");
    fruits.put("strawberry", "strawberry");
    fruits.put("pear", "pear");
    fruits.put("banana", "banana");
    fruits.put("lemon", "lemon");
    fruits.put("mango", "mango");
  */

  	List<String> fruits = new ArrayList<String>();
  	fruits.add("Apple");
  	fruits.add("Strawberry");
  	fruits.add("Pear");
  	fruits.add("Banama");
  	fruits.add("Lemon");
  	fruits.add("Mango");

%>
<body>

    <h2><%=title %></h2>

    <% Iterator<String> it = fruits.iterator();
    int count = 0;
    %>

    <table>
    	<%while(it.hasNext()){
    		String fruit = it.next();  %>
    	 <tr>
    			<td>
    				<font color="green" size="3">
             			<ul id="menu">
             				<li>
             					<a onclick='callFunction("<%=fruit%>")' id="<%=fruit%>"><%=fruit%></a>
             				</li>
             			</ul>
        			</font>
        		</td>
    	</tr> <% } %>

    </table>

    <div id="divMyFrame" style="display: none; position: absolute; left: 150px; top: 30px; width: 620px; height: 500px; border: #003C79 1px solid; background-color: #FFFFFF; z-index: 1000;">
				<iframe id="myFrame" width="100%" height="100%" frameborder="0"	scrolling="yes"></iframe>
			</div>

</body>
</html>