'How to create sub menus for a vertical navigation bar using css only
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.
Solution 1:[1]
#submenu{
display:none;
}
#nav li:hover > ul{
display:block;
}
I recommend class instead of id for submenu because you might want to have more than one.
Solution 2:[2]
<!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=iso-8859-1" />
<title>Sample </title>
<!--<link rel="stylesheet" href="Style.css" type="text/css" >-->
<style type="text/css" media="screen">
#horizontalmenu ul {
padding:1;
margin:2;
list-style:none;
}
#horizontalmenu li {
float:left;
position:relative;
padding-right:60;
display:block;
border:2px solid #FF0000;
border-style:outset;
}
#horizontalmenu li ul {
display:none;
position:absolute;
}
#horizontalmenu li:hover ul{
display:block;
background:#F9F2FF;
height:auto; width:14em;
}
#horizontalmenu li ul li{
clear:both;
border-style:none;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" width="100%" height="100%" border="0">
<tr>
<td valign="top">
<form id="cse-search-box" action="home.html">
<table width="100%" height="100%" border="0" bgcolor="#FDFEFF">
<tr>
<td height="120" width="190"> </td>
<td height="120" width="190"><!--<img src="Images/Laptop2.jpg" height="120" width="190" />--></td>
<td height="120" width="190" align="center"> </td>
<td height="120" width="180"><table width="180" height="120" border="0">
<tr>
<td><font color="#663333"> Call our LapTop Expert</font></td>
</tr>
<tr>
<td ><font color="#666633"> +919855566689</font></td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
<td height="120" width="210"> </td>
</tr>
<tr>
<td colspan="4" >
<div id="horizontalmenu">
<ul> <li><a href="sample.html">Home</a></li>
<li><a href="#">Battery</a>
<ul><li><a href="Batterysample.html">HP Laptop Battery</a></li>
<li><a href="SonyBattery.html">Sony Laptop Battery</a></li>
<li><a href="DellBattery.html">Dell Laptop Battery</a></li>
<li><a href="LenovoBattery.html">Lenovo Laptop Battery</a></li></ul></li>
<li><a href="#">Adapter</a>
<ul> <li><a href="HP Battery.html">HP Laptop Adapter</a></li>
<li><a href="#">Sony Laptop Adapter</a></li>
<li><a href="#">Dell Laptop Adapter</a></li>
<li><a href="#">Lenovo Laptop Adapter</a></li>
<li><a href="#">Toshiba Laptop Adapter</a></li></ul></li>
<li><a href="#">Laptop Care</a>
<ul> <li><a href="Battery care.html">Battery Care Practices</a></li></ul></li>
<li><a href="#">Service Status</a></li>
</ul>
</div> </td>
<td align="right">
<input type="text" placeholder="Search" />
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td align="right">
<input type="submit" name="sa" value="Search" /> </td>
</tr>
<tr>
<td colspan="5" height="70" bgcolor="#F0F0F0" valign="bottom"><font face="Agency FB" size="+4" color="#FFA8A8">Dell Laptop Battery </font></td>
</tr>
<tr>
<td colspan="5"bgcolor="#FFA6A6"></td>
</tr>
<!--<tr>
<td colspan="5" height="30"><font face="Agency FB" size="+2" color="#AAAAFF">Display </font>
<select><option value="5">5</option>
<option value="10" selected="selected">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="0">All</option>
</select>
</td>
</tr>-->
<tr>
<td colspan="5">
<p><font face="Agency FB" size="+2" color="#FF0000">Dell 14r Battery </font></p>
<p><font face="Agency FB" size="+2" color="#FF0000">Dell Inspiron 1464 Battery </font></p>
<p><font face="Agency FB" size="+2" color="#FF0000">Dell Inspiron 1525 Battery </font></p>
<p><font face="Agency FB" size="+2" color="#FF0000">Dell Inspiron M5010 9 cell Battery</font></p>
<p><font face="Agency FB" size="+2" color="#FF0000">Dell Inspiron N5010 Battery</font></p>
<p><font face="Agency FB" size="+2" color="#FF0000">Dell Latitude E5500 Battery </font></p>
<p><font face="Agency FB" size="+2" color="#FF0000">Dell Vostro 1500 Battery</font></p>
<p><font face="Agency FB" size="+2" color="#FF0000">Dell Vostro 1510/1520/1310 Battery </font></p>
</td>
</tr>
<tr>
<td colspan="5" height="30"> </td>
</tr>
<tr>
<td colspan="5" height="200"> </td>
</tr>
<tr>
<td colspan="5" bgcolor="#663300"></td>
</tr>
</table>
</form>
</td>
<tr bgcolor="#F4EAEA">
<td>
<table width="100%" border="0">
<tr>
<td width="250"><font face="Agency FB" color="#FF0000" size="5">Company Info</font></td>
<td width="250"><font face="Agency FB" color="#FF0000" size="5">Terms & Conditions</font></td>
<td width="250"><font face="Agency FB" color="#FF0000" size="5"></font></td>
<td width="250"><font face="Agency FB" color="#FF0000" size="5">Bangalore</font></td>
</tr>
<tr>
<td bgcolor="#FCF8F8"></td>
<td bgcolor="#FCF8F8"></td>
<td bgcolor="#FCF8F8"></td>
<td bgcolor="#FCF8F8"></td>
</tr>
<tr>
<td width="250"><a href="About.html"><font face="Times New Roman, Times, serif" color="#333300">About Us </font></a></td>
<td width="250"><font face="Times New Roman, Times, serif" color="#333300">Privacy Policy </font></td>
<td width="250" rowspan="5"> </td>
<td width="250" rowspan="5" valign="top"> </td>
</tr>
<tr>
<td width="250"><a href="Contact.html"><font face="Times New Roman, Times, serif" color="#333300">Enter Details To Get Service </font></a></td>
<td width="250"><font face="Times New Roman, Times, serif" color="#333300">Collection Centers </font></td>
</tr>
<tr>
<td width="250"><a href="Service Expertise.html"><font face="Times New Roman, Times, serif" color="#333300">Service Expertise </font></a></td>
<td width="250"><font face="Times New Roman, Times, serif" color="#333300">Services</font></td>
</tr>
<tr>
<td width="250"><font face="Times New Roman, Times, serif" color="#333300">Customer Reviews </font></td>
<td width="250"> </td>
</tr>
<tr>
<td width="250"> </td>
<td width="250"> </td>
</tr>
<tr>
<td colspan="4"> </td>
</tr>
<tr>
<td colspan="4" bgcolor="#FF9393"></td>
</tr>
</table></td>
</tr>
</tr>
</table>
</body>
</html>
Solution 3:[3]
This should work in your case..
#nav #subMenu{
display:none;
}
#nav li:hover #subMenu {
display: block;
}
Although you should use classes instead of ids. And remember that :hover is only available for links, in IE6.
Solution 4:[4]
you can use following that's work for you:
#nav #subMenu{
display:none;
}
#nav li:hover #subMenu {
display: block;
position:absolute;
left:228px;
background:#D8D8D8;
padding:0;
}
Solution 5:[5]
You can accomplish this with nested lists and absolute positioning:
nav {
display: inline-block;
}
.submenu {
display: none;
position: absolute;
left: 100%;
top: 0;
}
.menu > li {
position: relative;
}
.menu li:hover .submenu {
display: block;
}
Here's a dirty example http://codepen.io/JKudla/pen/mWGwqp?editors=1100
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Kuzgun |
| Solution 2 | user3286306 |
| Solution 3 | vascomotaborges |
| Solution 4 | Amit Narayan |
| Solution 5 |