Responsive Images in Nav-Menu will not resize to Page

I’ve been working on this menu for many weeks. I created an all image menu here: https://goo.gl/Ox1X24 . I’m putting quotes below for future reference (its so frustrating to look for help and have the links no longer working or relevant to the answer/questions).

The images are not responsive and I’m unable to change the height and width due to the plugin I used (I tried to get help for the plugin without results).

Each menu item has an image for the Default state, a Hover state and an Active state. Eventually I’ll add a pretty picture to the Hover state (when my hair grows back after all this stress…I wish I could lol!).

This is how the html code is for the menu.

<header id=”masthead” class=”site-header” role=”banner”>
<nav id=”site-navigation” class=”main-navigation” role=”navigation”>
<h3 class=”menu-toggle”> … </h3>

<div class=”menu-spring-2013-container”>
<ul id=”menu-spring-2013″ class=”nav-menu”>
<li id=”menu-item-470″ class=”menu-spring-2013 menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-8 current_page_item menu-item-470″><img class=”attachment-full wp-post-image” width=”138″ height=”118″ title=”Home” alt=”Home” src=”https://www.xxxxxxxx.com/wp-content/uploads/active_01.gif”></img&gt;
<li id=”menu-item-469″ class=”menu-spring-2013 menu-item menu-item-type-post_type menu-item-object-page menu-item-469″> …
<li id=”menu-item-603″ class=”menu-spring-2013 menu-item menu-item-type-post_type menu-item-object-page menu-item-603″> …
<li id=”menu-item-464″ class=”menu-spring-2013 menu-item menu-item-type-post_type menu-item-object-page menu-item-464″> …
…and there are more menu items

This is what I setup for the CSS to handle the images so far.

/* ———————-Spring 2013 MENU ——— */
.main-navigation spring-2013-container {
display: inline-block;
white-space: nowrap;
height:auto;
width:auto;
}
.main-navigation spring-2013-container li{
margin: 0px;
position: relative;
}
.main-navigation div.nav-menu spring-2013-container > ul{
display: inline-block !important;
width: 100%;
margin: 0px;
position: relative;
}
.main-navigation spring-2013-container img{
border-radius: 0px;
box-shadow: none;
}

I may have made changes to the other CSS styles, but I’m really, really, really lost right now AND burnt out.

I’d like the menu to stay in one row without wrapping and have each of the images resize down, even for mobile phones…if possible.

Thanks in advance.