title: CSS - Drop down menu appearing outside UL
body: <p>I am creating a drop down menu using CSS. However when I select the menu it selects in the space that the List will appear and from the UL. Not just the UL if that makes sense and i cannot work out why it does that. Please see the code for the example:-</p>
  
  <p>The CSS:-</p>
  
  <pre><code>#navigation .menu ul {position:absolute; top:45px; left:0px; opacity:0; background:black; transition:opacity .25s ease; -webkit-transition:opacity .25s ease;}
  #navigation .menu li:hover &gt; ul {opacity:1; margin:0;}
  #navigation .menu ul li {height:25px; width:200px; overflow:hidden; border-bottom:red 1px solid; border-left:none; margin:none; transition:opacity .25s ease; -webkit-transition:height .25s ease;}
  #navigation .menu ul li:hover {overflow:hidden; margin:0;}
  #navigation .menu ul li a {text-decoration:none; height:25px; width:200px;}
  #navigation .menu ul li:last-child {border-bottom:none;}
  </code></pre>
  
  <p>HTML code:-</p>
  
  <pre><code>&lt;div id="navigation"&gt; &lt;nav&gt; &lt;ul class="menu"&gt; 
  
          &lt;li&gt; &lt;a href="Option.html"&gt; &lt;h1&gt; Homepage &lt;/h1&gt; &lt;/a&gt; &lt;/li&gt;
  
          &lt;li&gt; &lt;a href="Option2.html"&gt; About &lt;/a&gt; &lt;ul class="ulbox"&gt;
  
                  &lt;li class="dm"&gt; &lt;a href="Option1.html"&gt; &lt;img src="images/Avengers.jpeg" width="25" /&gt; The Site &lt;/a&gt;&lt;/li&gt;
                  &lt;li class="dm"&gt; &lt;a href="Option2.html"&gt; &lt;img src="images/Doctor Strange.jpeg" width="25" /&gt; Find Us &lt;/a&gt;&lt;/li&gt;
                  &lt;li class="dm"&gt; &lt;a href="Option3.html"&gt; &lt;img src="images/Guardians.jpeg" width="25" /&gt; The Company &lt;/a&gt;&lt;/li&gt;
                  &lt;li class="dm"&gt; &lt;a href="Option4.html"&gt; &lt;img src="images/Inhumans.jpeg" width="25" /&gt; Contrived Page &lt;/a&gt;&lt;/li&gt;
                  &lt;li class="dm"&gt; &lt;a href="Option5.html"&gt; &lt;img src="images/Thor.jpeg" width="25" /&gt; Drop Down Success &lt;/a&gt;&lt;/li&gt;
  
  &lt;/ul&gt;  &lt;/li&gt;
          &lt;li&gt; &lt;a href="Option3.html"&gt; Images &lt;/a&gt; &lt;ul&gt;
  
                  &lt;li&gt; &lt;a href="Option1.html"&gt; The Site &lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt; &lt;a href="Option2.html"&gt; Find Us &lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt; &lt;a href="Option3.html"&gt; The Company &lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt; &lt;a href="Option4.html"&gt; Contrived Page &lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt; &lt;a href="Option5.html"&gt; Drop Down Success &lt;/a&gt;&lt;/li&gt;
  
   &lt;/ul&gt; &lt;/li&gt; 
              &lt;li&gt; &lt;a href="Option4.html"&gt; The next page &lt;/a&gt; &lt;ul&gt;
  
                  &lt;li&gt; &lt;a href="Option1.html"&gt; The Site &lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt; &lt;a href="Option2.html"&gt; Find Us &lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt; &lt;a href="Option3.html"&gt; The Company &lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt; &lt;a href="Option4.html"&gt; Contrived Page &lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt; &lt;a href="Option5.html"&gt; Drop Down Success &lt;/a&gt;&lt;/li&gt;
  
   &lt;/ul&gt; &lt;/li&gt;
              &lt;li&gt; &lt;a href="Option5.html"&gt; Terms and Stuff  &lt;/a&gt; &lt;ul&gt;
  
                  &lt;li&gt; &lt;a href="Option1.html"&gt; The Site &lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt; &lt;a href="Option2.html"&gt; Find Us &lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt; &lt;a href="Option3.html"&gt; The Company &lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt; &lt;a href="Option4.html"&gt; Contrived Page &lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt; &lt;a href="Option5.html"&gt; Drop Down Success &lt;/a&gt;&lt;/li&gt;
  
   &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; &lt;/div&gt;
  </code></pre>
  
  <p>I can't see why the menu is showing from outside the UL nav bar. Can someone help?</p>