Help on drop down menu

HTML & CSS
1

hey there, i have been trying to create a drop down menu in the navigation bar but i am having no luck at at.I have tried following tutorials but all end up the same where (not the way i want it to be).I would appreciate it if someone could take a look at my code and see where i have gone wrong.

CSS:

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

Html:

<!DOCTYPE HTML>
<html>
    <link href="Style.css" rel="stylesheet" type="text/css">
<head>
    <title>Out And Up</title>
    </head>  

    <body>  
        <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>
2

Hi there kierhill,

and a warm welcome to these forums. :slight_smile:

Here is you corrected and validated code…

<!DOCTYPE HTML>
<html>
              <!--<link href="Style.css" rel="stylesheet" type="text/css">-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>Out And Up</title>
<link href="Style.css" rel="stylesheet" media="screen">
<style media="screen" >
.nav {
              /*height: 38px;*/
              /*background: #47A32F;*/
    background: rgba(71,163,47,0.8);
              /*opacity:.8;*/
    text-align: center;
 }

.nav ul {
    display: inline-block;
    vertical-align: bottom;
    list-style: none;
    padding: 0;
    margin: 0;
              /*width:500px;*/
              /*margin: auto;*/
              /*text-align: center;*/
    text-align: left;
 }

.nav ul li {
    position:relative;
    float:left;
              /*list-style: none;*/
 }

.nav ul li ul {
    position: absolute;
    left: -9999em;
    background: rgba(71,163,47,0.8);
    white-space: nowrap;
 }

.nav ul li ul li {
    float:none;
 }

.nav ul li a {
    color: #000;
    text-decoration: none;
              /*float: left;*/
    display: block;
              /*padding: 10px 20px;*/
    padding: 0.625em 1.25em;
 }
              /*.nav ul a:hover { */
              /*}*/

.nav ul li:hover ul {
    left: 0;
 }

.nav ul li a:hover {
    background-color: #53DE31;
              /*color: ;*/
    opacity: .5;
 }
</style>
</head>  
<body>  
<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>

coothead

1 Like
3

Thank you soo much.Just to confirm was it my css which was wrong and not my html just so i know in the future i know what i should be looking at.Thanks again.

4

Yes that is correct. :sunglasses:

coothead

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.