Can anybody please help me with this problem.
In my application, I'm using Menus. and the CSS for the menu is as given below
ccMenu.css
Expand|Select|Wrap|Line Numbers
- /* Root = Horizontal, Secondary = Vertical */
- ul#navmenu {
- margin: 0;
- border: 0 none;
- padding: 0;
- /*width changed from 500px to 600px*/
- width: 500px; /*For KHTML*/
- list-style: none;
- height: 24px;
- }
- ul#navmenu li {
- margin: 0;
- border: 0 none;
- padding: 0;
- float: left; /*For Gecko*/
- display: inline;
- list-style: none;
- position: relative;
- height: 24px;
- }
- ul#navmenu ul {
- margin: 0;
- border: 0 none;
- padding: 0;
- width: 160px;
- list-style: none;
- display: none;
- position: absolute;
- top: 24px;
- left: 0;
- }
- ul#navmenu ul li {
- float: none; /*For Gecko*/
- display: block !important;
- display: inline; /*For IE*/
- }
- /* Root Menu */
- ul#navmenu a {
- border: 1px solid #FFF;
- border-right-color: #CCC;
- border-bottom-color: #CCC;
- padding: 0 6px;
- float: none !important; /*For Opera*/
- float: left; /*For IE*/
- display: block;
- background: #EEE;
- color: #666;
- font: bold 12px/22px Verdana, Arial, Helvetica, sans-serif;
- text-decoration: none;
- height: auto !important;
- height: 1%; /*For IE*/
- }
- /* Root Menu Hover Persistence */
- ul#navmenu a:hover,
- ul#navmenu li:hover a,
- ul#navmenu li.iehover a {
- background: #CCC;
- color: #FFF;
- }
- /* 2nd Menu */
- ul#navmenu li:hover li a,
- ul#navmenu li.iehover li a {
- float: none;
- background: #EEE;
- color: #666;
- }
- /* 2nd Menu Hover Persistence */
- ul#navmenu li:hover li a:hover,
- ul#navmenu li:hover li:hover a,
- ul#navmenu li.iehover li a:hover,
- ul#navmenu li.iehover li.iehover a {
- background: #CCC;
- color: #FFF;
- }
- /* 3rd Menu */
- ul#navmenu li:hover li:hover li a,
- ul#navmenu li.iehover li.iehover li a {
- background: #EEE;
- color: #666;
- }
- /* 3rd Menu Hover Persistence */
- ul#navmenu li:hover li:hover li a:hover,
- ul#navmenu li:hover li:hover li:hover a,
- ul#navmenu li.iehover li.iehover li a:hover,
- ul#navmenu li.iehover li.iehover li.iehover a {
- background: #CCC;
- color: #FFF;
- }
- /* 4th Menu */
- ul#navmenu li:hover li:hover li:hover li a,
- ul#navmenu li.iehover li.iehover li.iehover li a {
- background: #EEE;
- color: #666;
- }
- /* 4th Menu Hover */
- ul#navmenu li:hover li:hover li:hover li a:hover,
- ul#navmenu li.iehover li.iehover li.iehover li a:hover {
- background: #CCC;
- color: #FFF;
- }
- ul#navmenu ul ul,
- ul#navmenu ul ul ul {
- display: none;
- position: absolute;
- top: 0;
- left: 160px;
- }
- /* Do Not Move - Must Come Before display:block for Gecko */
- ul#navmenu li:hover ul ul,
- ul#navmenu li:hover ul ul ul,
- ul#navmenu li.iehover ul ul,
- ul#navmenu li.iehover ul ul ul {
- display: none;
- }
- ul#navmenu li:hover ul,
- ul#navmenu ul li:hover ul,
- ul#navmenu ul ul li:hover ul,
- ul#navmenu li.iehover ul,
- ul#navmenu ul li.iehover ul,
- ul#navmenu ul ul li.iehover ul {
- display: block;
- }
my jsp page is like this
linksMenu.jsp
Expand|Select|Wrap|Line Numbers
- <html>
- <head>
- <title>Child Tracking System</title>
- <script src="js/links.js" type = "text/javascript"></script>
- <link href="css/style.css" rel="stylesheet" type="text/css">
- <link href="css/displaytagex.css" rel="stylesheet" type="text/css">
- <link href="css/ccMenu.css" rel="stylesheet" type="text/css">
- <link href="css/egovModified.css" rel="stylesheet" type="text/css">
- <jsp:include page="authenticate.jsp" />
- </head>
- <body onload='getDistricts();' id="bodyArea" style="background-image: url('img/sides_body_wide.gif'); background-color:'#666';background-attachment: fixed; width: 100%; background-position: center top; overflow-x: hidden;">
- <!--------- START HEADER -------->
- <jsp:include page="incl/header.jsp" />
- <!--------- END HEADER -------->
- <td>
- <Center>
- <table align="center" width="90%">
- <form name="links" method="get" target="_self">
- <center>
- <table width="1002px" align="justify" style="background-color: transparent; font color="#9933ff"" border="0" cellpadding="0" cellspacing="5" >
- <table align="center" border="0" cellpadding="1" cellspacing="0" width="743">
- <tr>
- <td align="justify" width="100%">
- District:
- <select class="style01" id=district name="district" onchange='getBlock("block"); clearTable();'
- style=" width: 50mm;font-family: Georgia; border-style: double" size="1" tabindex="1" width="40" >
- </select>  
- Block:
- <select class="style01" id=block name="block"
- onchange=' getCluster("cluster");clearTable();'
- style="width: 80mm;font-family: Georgia; border-style: double" size="1" tabindex="2" >
- <option value="0">Select Block</option>
- </select>
- </td>
- </tr>
- </table>
- <table align="center" border="0" cellpadding="1" cellspacing="0" width="743" >
- <tr>
- <td align="left" width="100%" >
- Cluster:
- <select class="style01" id=cluster name="cluster"
- onchange=' getSchool("school");clearTable();'
- style="width: 80mm; font-family: Georgia; border-style: double; padding: 0" size="1" tabindex="3">
- <option value="0">Select Cluster</option>
- </select>
- School:
- <select class="style01" id=mySchool name="mySchool" onchange='clearTable();'
- style="width: 80mm; font-family: Georgia; border-style: double" size="1" tabindex="4">
- <option value="0">Select School</option>
- </select>
- </td>
- </tr>
- </table>
- </table>
- </form>
- <form name="menulinks" action="login/loginmenu.do" method="get" target="_self">
- <table width=850px align="center" style="background-color: transparent;" border="0" cellpadding="0" cellspacing="0">
- <tr>
- <td>
- <!-- Tab Navigation Begins -->
- <center>
- <ul id="navmenu" align="right" style="width: 1000px; " >
- <li><a style="cursor: pointer " target="_top" title="Create Codes">Codes</a>
- <ul>
- <li><a style="cursor: pointer " onClick="showTable(this.id)"
- id="createcode">Create Codes</a></li>
- <li ><a style="cursor: pointer " onClick="showTable(this.id)"
- id="viewcode">View Codes</a></li>
- </ul>
- </li>
- <li ><a style="cursor: pointer " target="_top" title="Create or view/Edit
- Blocks">Blocks</a>
- <ul>
- <li ><a style="cursor: pointer " onClick="showTable(this.id)"
- id="createblock">Create</a></li>
- <li ><a style="cursor: pointer " onClick="showTable(this.id)"
- id="viewblock">View/Edit</a></li>
- </ul>
- </li>
- <li ><a style="cursor: pointer " target="_top" title="Create or view/Edit
- Clusters">Clusters</a>
- <ul>
- <li ><a style="cursor: pointer " onClick="showTable(this.id)"
- id="createcluster">Create</a></li>
- <li ><a style="cursor: pointer " onClick="showTable(this.id)"
- id="viewcluster">View/Edit</a></li>
- </ul>
- </li>
- <li ><a style="cursor: pointer " title="Create or view/Edit
- Schools">Schools</a>
- <ul>
- <li ><a style="cursor: pointer " onClick="showTable(this.id)"
- id="createschool">Create</a></li>
- <li ><a style="cursor: pointer " onClick="showTable(this.id)"
- id="viewschool">View/Edit</a></li>
- </ul>
- </li>
- <li ><a style="cursor: pointer " target="_top" title="Create or view/Edit
- Classes">Classes</a>
- <ul>
- <li "><a style="cursor: pointer " onClick="showTable(this.id)"
- id="createclass">Create</a></li>
- <li ><a style="cursor: pointer " onClick="showTable(this.id)"
- id="viewclass">View/Edit</a></li>
- </ul>
- </li>
- <li ><a style="cursor: pointer " target="_top" title="Create or view/Edit
- Sections">Sections</a>
- <ul>
- <li ><a style="cursor: pointer " onClick="showTable(this.id)"
- id="createsection">Create</a></li>
- <li ><a style="cursor: pointer " onClick="showTable(this.id)"
- id="viewsection">View/Edit</a></li>
- </ul>
- </li>
- <li ><a style="cursor: pointer " target="_top" title="Create or view/Edit
- Teachers">Teachers</a>
- <ul>
- <li ><a style="cursor: pointer " onClick="showTable(this.id)"
- id="createteacher">Create</a></li>
- <li "><a style="cursor: pointer " onClick="showTable(this.id)"
- id="viewteacher">View/Edit</a></li>
- </ul>
- </li>
- <li ><a style="cursor: pointer " target="_top" title="Create or view/Edit
- Students">Students</a>
- <ul>
- <li ><a style="cursor: pointer " onClick="showTable(this.id)"
- id="createstudent">Create</a></li>
- <li ><a style="cursor: pointer " onClick="showTable(this.id);"
- id="viewstudent">View/Edit</a></li>
- </ul>
- </li>
- <li ><a style="cursor: no-drop; background-color: transparent; font
- color="#9933ff"" target="_top">Assessment</a>
- </li>
- </ul>
- </center>
- <!-- Tab Navigation Ends -->
- <script language='JavaScript'>
- function getDistricts()
- {
- --------------------Java Code---------------------
- }
- </script>
- </table>
- </table>
- </form>
- </body>
- </html>