can anyone help

Very new to HTML and trying to build my own website.

I have a floating menu bar that drops down when you hover over it. only problem is that now ive put images before it the bar appears underneath these when it drops down and you cant see it. can anyone tell me how to make these images appear underneath the drop down menu?

thanks
here is the html for the images

<img id="womanmed">
<!--<a href="./IMAGES/Woman_html.jpg" id="womanmed"> -->
<img src="./IMAGES/woman_html.jpg" id= "womanmed" style="float: left; width: 32%; margin-left; margin-bottom: 0.5em;">



<!--<a href="./IMAGES/Woman_html.jpg" id="womanmed"> -->
<img src="./IMAGES/Addons.jpg" id= "Addons" style="float: left; width: 32%; margin-right: 1%; margin-bottom: 0.5em;">

<!--<a href="./IMAGES/Woman_html.jpg" id="womanmed"> -->
<img src="./IMAGES/Mobile.jpg" id= "mobile" style="float: left; width: 32%; margin-right: 1%; margin-bottom: 0.5em;">
</img>

<div>


and here is for drop-down menu..

<section id="Home">
<ul>
<li><a href="30MM.html">Home</a>
<ul>
<li><a href="Book.html">Book</a></li>
<li><a href="Add-ons.html">Add-ons</a></li>
</ul>
</li>
<li><a href="Ourmission.html">Our Mission</a>
<ul>
<li><a href="Ourteam.html">Our Team</a></li>
<li><a href="Location.html">Location</a></li>
</ul>
</li>
<li><a href="Services.html">Services</a>
<ul>
<li><a href="Typeofmassage.html">Type of massage</a></li>
<li><a href="products.html">Products</a></li>
</ul>
</li>
<ul>
<li><a href="DeanMilnePT.html">DeanMilnePT</a>
<ul>
<li><a href="Bookwithdean.html">Book with Dean</a></li>
<li><a href="PersonalTraining">Personal Training</a></li>
<li><a href="Massage.html">Massage</a></li>
</ul>
</li>
<ul>
<li><a href="Contact.html">Contact</a>
<ul>
<li><a href="Phone.html">Phone</a></li>
<li><a href="Email.html">Email</a></li>
<li><a href="Facebook.html">Facebook</a></li>
<li><a href="Instagram.html">Instagam</a></li>

</li>
</ul>