CSS - Drop down menu appearing outside UL

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:-

The CSS:-

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

HTML code:-

<div id="navigation"> <nav> <ul class="menu"> 

        <li> <a href="Option.html"> <h1> Homepage </h1> </a> </li>

        <li> <a href="Option2.html"> About </a> <ul class="ulbox">

                <li class="dm"> <a href="Option1.html"> <img src="images/Avengers.jpeg" width="25" /> The Site </a></li>
                <li class="dm"> <a href="Option2.html"> <img src="images/Doctor Strange.jpeg" width="25" /> Find Us </a></li>
                <li class="dm"> <a href="Option3.html"> <img src="images/Guardians.jpeg" width="25" /> The Company </a></li>
                <li class="dm"> <a href="Option4.html"> <img src="images/Inhumans.jpeg" width="25" /> Contrived Page </a></li>
                <li class="dm"> <a href="Option5.html"> <img src="images/Thor.jpeg" width="25" /> Drop Down Success </a></li>

</ul>  </li>
        <li> <a href="Option3.html"> Images </a> <ul>

                <li> <a href="Option1.html"> The Site </a></li>
                <li> <a href="Option2.html"> Find Us </a></li>
                <li> <a href="Option3.html"> The Company </a></li>
                <li> <a href="Option4.html"> Contrived Page </a></li>
                <li> <a href="Option5.html"> Drop Down Success </a></li>

 </ul> </li> 
            <li> <a href="Option4.html"> The next page </a> <ul>

                <li> <a href="Option1.html"> The Site </a></li>
                <li> <a href="Option2.html"> Find Us </a></li>
                <li> <a href="Option3.html"> The Company </a></li>
                <li> <a href="Option4.html"> Contrived Page </a></li>
                <li> <a href="Option5.html"> Drop Down Success </a></li>

 </ul> </li>
            <li> <a href="Option5.html"> Terms and Stuff  </a> <ul>

                <li> <a href="Option1.html"> The Site </a></li>
                <li> <a href="Option2.html"> Find Us </a></li>
                <li> <a href="Option3.html"> The Company </a></li>
                <li> <a href="Option4.html"> Contrived Page </a></li>
                <li> <a href="Option5.html"> Drop Down Success </a></li>

 </ul> </li> </ul> </nav> </div>

I can't see why the menu is showing from outside the UL nav bar. Can someone help?