title: How can you create a vertical navbar with drop down menus?
body: <p>I have a vertical navbar. Now, this navbar is supposed to have drop down menus. The only problem for me is, I am unable to make it so that the drop down menus are to the side of the menu. I have the <code>HTML and CSS</code> code on jsFiddle here:
  <a href="http://jsfiddle.net/maxkoenig/ZYUeX/" rel="nofollow">http://jsfiddle.net/maxkoenig/ZYUeX/</a>
  Here it is if you don't want to go on the website:
  HTML:</p>
  
  <pre><code>&lt;div id="wrap"&gt;
            &lt;ul class="navbar"&gt;
               &lt;li&gt;&lt;a href="/index.php"&gt;Home&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="/boattypes/featureboats.php"&gt;Boat Types&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="/boattypes/sprint/sprint.php"&gt;Sprint&lt;/a&gt;&lt;/li&gt;
                     &lt;li&gt;&lt;a href="/boattypes/fitnesstouring/fitnesstouring.php"&gt;Fitness-touring&lt;/a&gt;&lt;/li&gt;
                     &lt;li&gt;&lt;a href="/boattypes/marathon/marathon.php"&gt;High Performance&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="/boattypes/surfski/surfskis.php"&gt;Surf Skis&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;         
               &lt;/li&gt;
               &lt;li&gt;&lt;a href="/rent/services.php"&gt;Inventory&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="/rent/memb.php"&gt;Membership&lt;/a&gt;&lt;/li&gt;
                     &lt;li&gt;&lt;a href="/rent/rboat.php" &gt;Rentals&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="/rent/rb.php"&gt;Banquet&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="/rent/faq.php"&gt;FAQ&lt;/a&gt;&lt;/li&gt;
  
                  &lt;/ul&gt;         
               &lt;/li&gt;
               &lt;li&gt;&lt;a href="/ages/ages.php"&gt;Ages&lt;/a&gt;
                  &lt;ul&gt;
                     &lt;li&gt;&lt;a href="/ages/adult.php"&gt;Adults&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="/ages/children.php"&gt;Children&lt;/a&gt;&lt;/li&gt;
  
                  &lt;/ul&gt;         
               &lt;/li&gt;
               &lt;li&gt;&lt;a href="about.php"&gt;About Us&lt;/a&gt;
                   &lt;li&gt;&lt;a href="contact_us.php"&gt;Contact Us&lt;/a&gt;
                  &lt;/ul&gt;
         &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#wrap {
      width: 150px; 
      height: 50px; 
      padding-bottom: 10px;
      margin: 0; /* Ensures there is no space between sides of the screen and the menu */
      z-index: 1; /* Makes sure that your menu remains on top of other page elements */
      position: fixed;
      background-color: RoyalBlue;
  
      }
  .navbar {
      height: 50px;
      padding: 0;
      padding-bottom: 10px;
      margin: 0;
      position: fixed; /* Ensures that the menu doesn’t affect other elements */
      border-right: 1px solid #54879d; 
      z-index: 12;
      }
  .navbar li  {
              padding-bottom: 10px;
              height: auto;
              width: 150px;  /* Each menu item is 150px wide */
              /*float: left;   This lines up the menu items horizontally */
              object-position: top;
              text-align: center;  /* All text is placed in the center of the box */
              list-style: none;  /* Removes the default styling (bullets) for the list */
              font: normal bold 12px/1.2em Arial, Verdana, Helvetica;  
              padding: 0;
              margin: 0;
              background-color: RoyalBlue;
                          }
  .navbar a   {                           
          padding: 18px 0;  /* Adds a padding on the top and bottom so the text appears centered vertically */
          border-left: 1px solid #0026ff; /* Creates a border in a slightly lighter shade of blue than the background.  Combined with the right border, this creates a nice effect. */
          border-right: 1px solid #0026ff; /* Creates a border in a slightly darker shade of blue than the background.  Combined with the left border, this creates a nice effect. */
          text-decoration: none;  /* Removes the default hyperlink styling. */
          color: #000; /* Text color is black */
          display: block;
          }
  
  .navbar li:hover, a:hover {
      background-color: rgba(4, 6, 0, 0.00);
  }
  
  .navbar li ul   {
          display: none;  /* Hides the drop-down menu */
          height: auto;                                   
          margin: 0; /* Aligns drop-down box underneath the menu item */
          padding: 0; /* Aligns drop-down box underneath the menu item */         
          }               
  
  .navbar li:hover ul     {
                          display: block; /* Displays the drop-down box when the menu item is hovered over */
                          z-index: 12;
                          padding-left: 1px;
  
                          }
  
  .navbar li ul li {
      background-color: #2ba6ff;
  }
  
  .navbar li ul li a  {
          border-left: 1px solid #0026ff;
          border-right: 1px solid #0026ff;
          border-top: 1px solid #0026ff;
          z-index: 1001;
          }
  
  .navbar li ul li a:hover {
      background-color: #0094ff;
      z-index: 1000;
  }
  </code></pre>