How to Scale this Image Rollover CSS UL Menu? Disappearing Images when Browser Scaled Down.

Hello, I'm having issues with this dictionary menu I'm working on. They are image rollovers using one image file and a ul list. However, when I scale the browser down the letters will disappear. I would like the whole menu to just scale down smaller to fit the screen. How can this be done? After doing some searches someone said it's because of the float, what would need to be done to correct this issue from happening?

You can see my menu here to see what I mean... https://cruxmagic.com/lexicon

Here's my List and CSS...
Thanks for any help you can provide!

<ul id="lettersan">
<li><a id="leta" href="#a">A</a></li>
<li><a id="letb" href="#b">B</a></li>
<li><a id="letc" href="#c">C</a></li>
<li><a id="letd" href="#d">D</a></li>
<li><a id="lete" href="#e">E</a></li>
<li><a id="letf" href="#f">F</a></li>
<li><a id="letg" href="#g">G</a></li>
</ul>

HTML:

/* Start Main Menu */

#lettersan {
list-style: none;
width: 100%;
height: 129px;
padding: 0;
margin: 15px 50px 0px 0px;
overflow: hidden;

}
#lettersan li {
    float: left;
}

#lettersan a {
    display: block;
    height: 165px;
    background-image: url(https://cruxmagic.com/wp-content/uploads/2019/08/Lexicon-Letters-A-N.gif);
text-indent: -9999px;
outline-style: none;

}

#leta {
width: 110px;
background-position: 0px 0px;
}
#leta:hover {
background-position: 0px -129px;
}

#letb {
width: 107px;
background-position: -110px 0px;
}
#letb:hover {
background-position: -110px -129px;
}

#letc {
width: 112px;
background-position: -217px 0px;
}
#letc:hover {
background-position: -217px -129px;
}

#letd {
width: 108px;
background-position: -329px 0px;
}
#letd:hover {
background-position: -329px -129px;
}

#lete {
width: 105px;
background-position: -437px 0px;
}
#lete:hover {
background-position: -437px -129px;
}

#letf {
width: 102px;
background-position: -542px 0px;
}
#letf:hover {
background-position: -542px -129px;
}

#letg {
width: 116px;
background-position: -644px 0px;
}
#letg:hover {
background-position: -644px -129px;
}

/* End Main Menu */

Code (CSS):

 

Generally this is -- along with the accessibility woes -- why images for text are an epic /FAIL. at web development. On the whole that entire page is painfully and agonzingly image heavy, with whatever PSD jockey vomited up the design having no real business making websites -- aka "stick to DeviantArt".

The use of pixel metrics in general increasingly has no place in modern design, hence all those "px' measurements in the stylesheet are inaccessible trash.

You could try to correct it with the new(ish) background-size properly, but I'd seriously try replacing those (pointless) images with a webfont and see how far text-shadow could be pushed...

though really given how agonizingly slow loading and painfully illegible the entire page is, I'd suggest just putting the entire site down like Old Yeller and starting over from scratch. There is little if anything there I'd try to keep.