title: Hover drop down menu in css is not opening in the right position
body: <p>My problem with this nav bar is when I hover over a category in the nav bar the drop down menu does not appear underneath the category. For some reason it ends up in the left hand corner and I cannot reach it! Please help me out, I cannot find the answer anywhere!</p>
  
  <p>HMTL</p>
  
  <pre><code> &lt;div class="menu"&gt;
     &lt;ul&gt;
        &lt;li&gt;&lt;a href="#" &gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#" id="current"&gt;Fruit&lt;/a&gt;
           &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Apples&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Oranges&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Bananas&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Pears&lt;/a&gt;&lt;/li&gt;
           &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="/about.html"&gt;About&lt;/a&gt;
           &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Company Info&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Locations&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;FAQ&lt;/a&gt;&lt;/li&gt;
           &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="/contact/contact.php"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>  .menu{
      text-align:center;
      background-color: #000;
      float:left;
      width:900px;
  
  
      text-decoration:none; 
  
  
  }
  .menu ul{
  
  background: transparent;
  
  list-style:none;
  margin:0;
  padding:0;
  
  
  }
  .menu li{
      display:inline;
      width: 100px;
  
  
  list-style-type: none;
  
      font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
      font-size: 30px;
      padding: 0 30px 0 0; 
  
  }
  .menu li a{
  
  
  
  color: transparent;
      text-transform: uppercase;
      text-shadow: 0px 0px 5px #333;
      letter-spacing: 1px;
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      -ms-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
  
  
  text-align:center;
  text-decoration:none;
  }
  .menu li a:hover{
  
  
      text-shadow: 0px 0px 5px #39C;
      text-decoration:none;
  background:#C60;
  color:#FFFFFF;
  text-decoration:none;
  -webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
  -moz-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
  box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
  }
  .menu ul li:hover a{
  background:#3CC;
  color:#FFFFFF;
  text-decoration:none;
  }
  .menu li ul{
  
  
  display:none;
  height:auto;
  padding:0px;
  margin:0px;
  border:0px;
  position:absolute;
  width:200px;
  
  }
  .menu li:hover ul{
  display:block; 
  
  }
  .menu li li {
  
  display:block;
  float:none;
  margin:0px;
  padding:0px;
  width:200px;
  background:#000;
  
  }
  .menu li:hover li a{
  background:none;
  }
  .menu li ul a{
  display:block;
  height:50px;
  font-size:12px;
  font-style:normal;
  margin:0px;
  padding:0px 10px 0px 15px;
  text-align:center;
  }
  .menu li ul a:hover, .menu li ul li:hover a{
      text-align:center;
  border:0px;
  color:#ffffff;
  text-decoration:none;
  background:#666;
   -webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
  -moz-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
  box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
  }
  </code></pre>