drop down menu badly aligned

Hi,

I am trying to make a menu, but all my drop down child ul lists aligns at the left of the page.

I use left:0 to align the drop down list to the parrent element. But I'm have trouble, I don't succeed to do this.

Please help me.

here is the .php


<html>

<head>
<link rel="stylesheet" type="text/css" href="index1.css"> 
</head>


<body>

<ul id="nav">

 <li>

  <a href="#"> Home </a>

 </li> 


 <li>

  <a href="#"> About </a>

  <ul>
  <li> <a href="#"> The product </a> </li>


  <li> <a href="#"> The big big product </a> </li>
  </ul>



 </li>


 <li>
  
  <a href="#"> Services </a>
  
  <ul>

   <li> <a href="#"> Service One </a> </li>
   <li> <a href="#"> Service Two </a> </li>

  </ul>

 </li>

</ul>

and here is the .css


#nav

{

list-style:none; /* scoate bulinele de lista */
 position:relative;
 z-index:5;

}

#nav li {

float:left;
margin-right:10px;



}


#nav li:hover a{

background:#6b0c36;

}



#nav a{

text-decoration:none; /* scoate underline-ul din link */
display:block;
color:#fff;  /* culoarea textului */ 
background:#333; 
padding-left: 15px;
padding-right: 15px;
 


}



#nav a:hover{   /* cand treci cu mouse-ul peste se aprinde background-ul */

background-color:red;

}


#nav li:hover ul {
  left:0px;
  
}


#nav li:hover ul li a:hover{

background: green;

}

#nav ul{

list-style:none;
position:absolute;
left:-9999px;

}

#nav ul li{ /* astea sunt elementele liste drop down (copii) de sub elementele parinte dispuse orizontal */

float:none; /* pentru ca elementele din listele dropdown sa se aseze unul sub altul */ 
padding-top:1px;


}

#nav ul li a{ 

padding-left:30px; 
}

Thank you.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">

<title>untitled document</title>

<style>
#nav,#nav ul {
   padding:0;
   margin:0;
   list-style:none;
  }
#nav li {
   position:relative;
   float:left;
   margin-right:10px;
  }
#nav a {
   display:block;
   padding:0 15px;
   text-decoration:none; 
   color:#fff;
   background-color:#333;
  }
#nav a:hover {
   background-color:#f00;
  }
#nav li:hover ul {
   display:block;
   left:0;
  }
#nav ul a:hover {
   background-color:#008000;
  }
#nav ul {
   position:absolute;
   display:none;
   white-space:nowrap;
 }
#nav ul li { 
   float:none;
   padding-top:1px;
 }
#nav ul li a {
   padding-left:30px;
 }
</style>

</head>
<body>

<ul id="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a>
   <ul>
     <li><a href="#">The product</a></li>
     <li><a href="#">The big big product</a></li>
   </ul>
  </li>
  <li><a href="#">Services</a>
   <ul>
     <li><a href="#">Service One</a></li>
     <li><a href="#">Service Two</a></li>
   </ul>
  </li>
</ul>

</body>
</html>

drop down menu badly aligned

ghid

birdbrain

ghid

birdbrain

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week