Images with dropdown menus are falling out of place

[FirstLast1234]

In Adobe Dreamweaver, I have a row of five images. When I add dropdown menus to the images, the last few images fall out of place. They fall down a bit lower than the first two images, and the spacing between them is much wider than the small space between the first two images that it's supposed to have.

Also, the images also abruptly cut off if I zoom in on my browser. It's not sticking out of the screen so I can't scroll over to see the rest of it. The image literally cuts off before the end of the screen, and I can see the white background of the website again.

Why is this happening and how can I fix it? Thanks in advance.

UPDATE: Here is the code...

<ul> <div style="float:left" class="navigationbuttons1"> <li class="dropdown"> <a href="index.html"> <img src="pictures/home-page.jpg" class="picturesnavigation1" width="" height="" alt="" /> </a> </li> <li class="dropdown"> <a href="news.html"> <img src="pictures/news.jpg" class="picturesnavigation1" width="" height="" alt=""/> </a> </li> <li class="dropdown"> <a href="a.html"> <img src="pictures/a.jpg" class="picturesnavigation1" width="" height="" alt="" /> </a> <div class="dropdown-content"> <br> <a href="1.html">1 </a> <br> <a href="2.html">2 </a> <br> <a href="3.html">3 </a> <br> <a href="4.html">4 </a> <br> <a href="5.html">5 </a> <br> <a href="6.html">6 </a> <br> <a href="7.html">7 </a> <br> <a href="8.html">8 </a> <br> <a href="9.html">9 </a> <br> <a href="10.html">10 </a> <br> </div> </li> <li class="dropdown"> <a href="b.html"> <img src="pictures/b.jpg" class="picturesnavigation1" width="" height="" alt=""/> </a> <div class="dropdown-content"> <br> <a href=".html">Currently unavailable - please check again soon, we are working on it as we speak. </a> <br> </div> </li> <li class="dropdown"> <a href="c.html"> <img src="pictures/c.jpg" class="picturesnavigation2" width="" height="" alt=""/> </a> <div class="dropdown-content"> <br> <a href=".html">Currently unavailable - please check again soon, we are working on it as we speak. </a> <br> </div> </li> </div> </li> </ul>

[BenPleysier]

Please copy and paste the relevant code here so that we can see what you are talking about.

[BenPleysier]

Not much of a help for us to help you. This is what I get

Edit: This may explain why the last two images take up more space than the others.

2nd Edit: The only element that may be a child of <ul> is <li>. In other words, your <div> inside the <ul> is illegal.

[Nancy OShea]

We need to see your entire document.  Please upload it to a public web server  that you control and post the URL here.

It's unclear exactly what you want.  But Bootstrap Cards might solve your layout dilemma.

https://colorlib.com/wp/bootstrap-cards/