Help on drop down menu (2)


I tried to create a drop down menu in html and css but i didn't work out.I am not sure what to do now as every tutorial i copy ends up looking the same.Here is whats currently happening:

The Segway, team building and zip line should be under activities but as you can see it is in line with it instead.

Below is the HTML and CSS code:

    <link href="Style.css" rel="stylesheet" type="text/css">
    <title>Out And Up</title>
        <div class="logo">
    <a href="file:///Users/KieranHill/Desktop/School_Website/Index.html"><img src="../school_website/Images/Out%20And%20Up.jpg" width="190.5" length="150.75"/></a>
        <div class="nav">
          <li><a href="#">Activities</a>
                     <li><a href="#">Segway</a></li>
                     <li><a href="#">Team Building</a></li>
                     <li><a href="#">Zip Line</a></li>
          <li><a href="#">Cafe</a></li>  
          <li><a href="#">Booking</a></li>  
          <li><a href="#">Location</a></li> 
          <li><a href="#">Contact Us</a></li>   


.logo {
    text-align: center;

.nav {
    height: 38px;
    background: #47A32F;
    opacity: .8;

.nav ul {
   list-style: none;
  padding: 0;
  margin: auto;
  text-align: center;

.nav ul li {
    list-style: none;

.nav ul li a {
    color: #000;
    text-decoration: none;
    float: left;
   display: block;
    padding: 10px 20px;

.nav ul a:hover {

.nav ul li a:hover {
    background-color: #53DE31;
    color: ;
    opacity: .5;

.nav a	{							
		padding: 18px 0; 
		text-decoration: none;
		color: white;
		display: block;

.nav li ul {
		display: none;  
		height: auto;									
		margin: 0;
		padding: 0;

.nav li:hover ul {
display: block;


Have you tried a google search
html creating drop down menu
for intance


tricky isn't it? here is something to help you going, the problem was your float: left, it caused the elements to sit beside each other (float: left does that)

It is a start, now it is your turn again


Yea i have tried alot but all have the same outcome for some reason


yea i have been trying for ages now but thanks for telling me that it was the float which made it appear next to it and not below it or else i would still be scratching my head why its happening.


This should help you forward, good luck! :slight_smile: