I have been surfing for long to know how to create a Sub menu for a vertical navigation page for my website.
I want simple CSS to be used.
I have my nav.jsp page having all the navigation links. The code of the same is as below
<table width="220" cellspacing="0" cellpadding="0" height="100%">
<tr>
<td bgcolor="#D8D8D8" valign="top">
<ul id="nav">
<li><a href="home.jsp"> Home</a>
</li>
<li><a href="addCompanyDetails.jsp"> Add Company Details</a>
</li>
<li><a href="modifyCompanyDetails.action"> Modify Company Details</a>
<ul id = "subMenu">
<li>Sub Menu 1
</li>
<li>Sub Menu 2
</li>
<li>Sub Menu 3
</li>
<li>Sub Menu 4
</li>
</ul>
</li>
<li><a href="deleteCompanyDetails.action"> Delete Company Details</a>
</li>
<li><a href="search.jsp"> Search</a>
</li>
<li><a href="viewAllDetails.action"> View All Details</a>
</li>
</ul>
</td>
</tr>
</table>
I have written my css code for the parent links. The CSS code for the same is as below
#nav {
padding: 0;
margin: 0;
width: 220px;
padding: 0px;
border: 0px;
margin: 0px;
}
#nav li {
width: 100%;
display: block;
float: left;
height: 35px;
border-bottom: 1px solid #ffffff;
}
#nav li a {
width: 100%;
display: block;
float: left;
height: 35px;
line-height: 35px;
text-decoration: none;
color: #000000;
}
#nav li a:hover {
width: 100%;
display: block;
float: left;
height: 35px;
line-height: 35px;
background-color: #404040;
color: #ffffff;
}
There is no CSS code to display the submenus. I have the css code only to display parent menu. On mouse over on the parent menu, the sub menu should appear.
Please help me out. If anything please write back.
Thanks a tonn in advance for your help.
Aucun commentaire:
Enregistrer un commentaire