像这种导航栏要怎么实现?用图片还是CSS就可以实现了?
求解答,最好有实现例子提供下载
------解决方案--------------------------------------------------------
- HTML code
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%@ taglib uri="eaglelink" prefix="eaglelink"%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style> .menu1{background:#308EF8};</style><script language="javascript" src="<eaglelink:contextpath/>/html/js/jquery-1.3.2.min.js"></script><script language="javascript">//初始化时让菜单二层全部隐藏$(document).ready(function(){ $(".menu1").siblings().hide();});</script></head><body><table width="900" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="260" height="600" valign="top" bgcolor="#FFE4E1"><table width="96%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td colspan="2"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr class="menu1"> <td><div align="center">菜单１</div></td> </tr> <tr> <td bgcolor="#FFFFCA"><div align="center">选项a</div></td> </tr> <tr> <td bgcolor="#FFFFCA"><div align="center">选项b</div></td> </tr> <tr> <td bgcolor="#FFFFCA"><div align="center">选项c</div></td> </tr> </table></td> </tr> <tr> <td colspan="2"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr class="menu1"> <td><div align="center">菜单2</div></td> </tr> <tr> <td bgcolor="#FFFFCA"><div align="center">选项a</div></td> </tr> <tr> <td bgcolor="#FFFFCA"><div align="center">选项b</div></td> </tr> <tr> <td bgcolor="#FFFFCA"><div align="center">选项c</div></td> </tr> </table></td> </tr> <tr> <td colspan="2"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr class="menu1"> <td><div align="center">菜单3</div></td> </tr> <tr> <td bgcolor="#FFFFCA"><div align="center">选项a</div></td> </tr> <tr> <td bgcolor="#FFFFCA"><div align="center">选项b</div></td> </tr> <tr> <td bgcolor="#FFFFCA"><div align="center">选项c</div></td> </tr> </table></td> </tr> <tr> <td colspan="2"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr class="menu1"> <td><div align="center">菜单4</div></td> </tr> <tr> <td bgcolor="#FFFFCA"><div align="center">选项a</div></td> </tr> <tr> <td bgcolor="#FFFFCA"><div align="center">选项b</div></td> </tr> <tr> <td bgcolor="#FFFFCA"><div align="center">选项c</div></td> </tr> </table></td> </tr> <tr> <td colspan="2"> </td> </tr> <tr> <td colspan="2"> </td> </tr> </table></td> <td> </td> </tr></table><script language="javascript">//控制菜单选项显示和隐藏$(".menu1").click(function(){$(this).siblings().show();$(".menu1").not($(this)).siblings().hide();});</script></body></html>