title: How to create sub menus for a vertical navigation bar using css only
body: <p>I have been surfing for long to know how to create a Sub menu for a vertical navigation page for my website. </p>
  
  <p>I want simple CSS to be used.</p>
  
  <p>I have my nav.jsp page having all the navigation links. The code of the same is as below</p>
  
  <pre><code>    &lt;table width="220" cellspacing="0" cellpadding="0" height="100%"&gt;
      &lt;tr&gt;
          &lt;td bgcolor="#D8D8D8" valign="top"&gt;
          &lt;ul id="nav"&gt;
          &lt;li&gt;&lt;a href="home.jsp"&gt;&amp;nbsp;&amp;nbsp;Home&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="addCompanyDetails.jsp"&gt;&amp;nbsp;&amp;nbsp;Add Company Details&lt;/a&gt;     
                      &lt;/li&gt;
          &lt;li&gt;&lt;a href="modifyCompanyDetails.action"&gt;&amp;nbsp;&amp;nbsp;Modify Company Details&lt;/a&gt;
              &lt;ul id = "subMenu"&gt;
              &lt;li&gt;Sub Menu 1
              &lt;/li&gt;
              &lt;li&gt;Sub Menu 2
              &lt;/li&gt;
              &lt;li&gt;Sub Menu 3
              &lt;/li&gt;
              &lt;li&gt;Sub Menu 4
              &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="deleteCompanyDetails.action"&gt;&amp;nbsp;&amp;nbsp;Delete Company Details&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="search.jsp"&gt;&amp;nbsp;&amp;nbsp;Search&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="viewAllDetails.action"&gt;&amp;nbsp;&amp;nbsp;View All Details&lt;/a&gt;
          &lt;/li&gt;
          &lt;/ul&gt;
                  &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p>I have written my css code for the parent links. The CSS code for the same is as below</p>
  
  <pre><code>    #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;
      }
  </code></pre>
  
  <p>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.</p>
  
  <p>Please help me out. If anything please write back. </p>