Wie können Sie eine vertikale Navigationsleiste mit Dropdown-Menüs erstellen?

Question

Ich habe eine vertikale Navbar. Jetzt soll diese Navigationsleiste Drop-Down-Menüs haben. Das einzige Problem für mich ist, ich kann es nicht schaffen, dass die Dropdown-Menüs neben dem Menü sind. Ich habe den HTML and CSS Code auf jsFiddle hier: http://jsfiddle.net/maxkoenig/ZYUeX/ Hier ist es, wenn Sie nicht auf die Website gehen wollen: HTML:

<div id="wrap"> 
      <ul class="navbar"> 
      <li><a href="/index.php">Home</a></li> 
      <li><a href="/boattypes/featureboats.php">Boat Types</a> 
       <ul> 
        <li><a href="/boattypes/sprint/sprint.php">Sprint</a></li> 
        <li><a href="/boattypes/fitnesstouring/fitnesstouring.php">Fitness-touring</a></li> 
        <li><a href="/boattypes/marathon/marathon.php">High Performance</a></li> 
        <li><a href="/boattypes/surfski/surfskis.php">Surf Skis</a></li> 
       </ul>   
      </li> 
      <li><a href="/rent/services.php">Inventory</a> 
       <ul> 
        <li><a href="/rent/memb.php">Membership</a></li> 
        <li><a href="/rent/rboat.php" >Rentals</a></li> 
        <li><a href="/rent/rb.php">Banquet</a></li> 
        <li><a href="/rent/faq.php">FAQ</a></li> 

       </ul>   
      </li> 
      <li><a href="/ages/ages.php">Ages</a> 
       <ul> 
        <li><a href="/ages/adult.php">Adults</a></li> 
        <li><a href="/ages/children.php">Children</a></li> 

       </ul>   
      </li> 
      <li><a href="about.php">About Us</a> 
       <li><a href="contact_us.php">Contact Us</a> 
       </ul> 
     </div> 

CSS:

#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; 
} 

Answer 1

Tun Sie dies:

.navbar li ul 
{ 
    display: none; /* Hides the drop-down menu */ 
    margin-left: 150px; 
    margin-top: -50px; 
    float:left; 
    height: 0; 
} 

Hier ist die jsFiddle Demo: http://jsfiddle.net/leniel/ZYUeX/3/