title: How to add vertical sub-menu to horizontal menu using css and html?
body: <p>I want to add a vertical sub-menu to my horizontal menu. I have menu style like a spotlight. I've tried everything but it didn't work. Please help me. </p>
  
  <p>Here is the code:</p>
  
  <pre><code>&lt;div class="spotlightmenu"&gt;  
      &lt;ul&gt;
          &lt;li&gt;&lt;%: Html.ActionLink("Home", "Index", "Home")%&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;%: Html.ActionLink("submenu1", "", "")%&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;%: Html.ActionLink("submenu2", "", "")%&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;%: Html.ActionLink("submenu3", "", "")%&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;%--   &lt;li&gt;&lt;%: Html.ActionLink("About", "About", "Home")%&gt;&lt;/li&gt; --%&gt;
          &lt;li&gt;&lt;%: Html.ActionLink("Profile", "", "")%&gt;&lt;/li&gt;
          &lt;li&gt;&lt;%: Html.ActionLink("Register", "Index", "Register")%&gt;&lt;/li&gt;
          &lt;li&gt;&lt;%: Html.ActionLink("About Us", "", "")%&gt;&lt;/li&gt;
          &lt;li&gt;&lt;%: Html.ActionLink("Contact Us", "", "")%&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and here is the css file:</p>
  
  <pre><code>.spotlightmenu {
      width: 100%;
      overflow:hidden;
  }
  
  .spotlightmenu ul {
      margin: 0;
      padding: 0;
      font: bold 14px Verdana; /* font style and size */
      list-style-type: none;
      text-align: left; /* "left", "center", or "right" align menu */
      /* background-color: #0033FF; */
      background-image: url('menu_style.jpg');
      border-radius:40px;  /* for making round corners of the menu */
      /* opacity:0.5; */ 
  }
  
  .spotlightmenu li {
      display: inline-block;
      position:relative;
      padding: 5px;
      margin: 0;
      margin-right: 5px; /* right margin between menu items */
  }
  
  
  .spotlightmenu li a {
      display:inline-block;
      padding: 5px;
      padding-top:10px;
      min-width:50px; /* horizontal diameter of spotlight */
      height:30px; /* vertical diameter of spotlight */
      text-decoration: none;
      color: white;
      margin: 0 auto;
      overflow:hidden;
      -moz-transition: all 0.5s ease-in-out; /* CSS3 transition to animate all A properties */
      -webkit-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      -ms-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
  }
  
  .spotlightmenu li:hover a {
      color: white;
      background: #99CC66;            /* #669900; /* background color of spotlight */
      -webkit-border-radius: 50%; /* large radius to create circular borders */
      -moz-border-radius: 50%;
      border-radius: 50%;
  }
  
  .spotlightmenu li a span {
      position:relative;
      top:35%; /* move text down so it appears centered within menu item */
  }
  </code></pre>