Help on drop down menu (2)

<PLEASE USE THE FOLLOWING TEMPLATE TO HELP YOU CREATE A GREAT POST!>

<Below this line, add a link to the EXACT exercise that you are stuck at.>
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:

<In what way does your code behave incorrectly? Include ALL error messages.>
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:

``` Out And Up
<body>
    <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>
            
    <div class="nav">
    <ul>
      <li><a href="#">Activities</a>
             <ul>
                 <li><a href="#">Segway</a></li>
                 <li><a href="#">Team Building</a></li>
                 <li><a href="#">Zip Line</a></li>
            </ul>  
        </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>   
        
    </ul>
           
        </div>  
</body>
```
.logo {
    text-align: center;
}


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

.nav ul {
   list-style: none;
  padding: 0;
  width:500px;
  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;
}



@kierhill,
Have you tried a google search
html creating drop down menu site:stackoverflow.com
for intance
http://stackoverflow.com/questions/9953482/how-to-make-a-pure-css-based-dropdown-menu

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: