Help on drop down menu (2)


#1




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:


<!DOCTYPE HTML>
<html>
    <link href="Style.css" rel="stylesheet" type="text/css">
<head>
    <title>Out And Up</title>
    </head>  
 
    <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>


  
</html>

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


#2

@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


#4

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


#5

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


#6

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.


#7

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