How to create a vertical navigation bar with drop-down menus?

Question

I have a vertical navigation bar. This navigation bar should now have dropdown menus. The only problem for me: I cannot make the dropdown menus be on the side of the menu. I have HTML and CSS code on jsFiddle here: http://jsfiddle.net/maxkoenig/ZYUeX/ Now, if you do not want to go to the site: 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

Do it:

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

Here's the jsFiddle demo: http://jsfiddle.net/leniel/ZYUeX/3/