Floating Menu (TOC) is not responsive

[meeekz]

I have created an index (table of contents) using an unordered list and css with position: fixed. The list items are hyperlinked to different anchors on my page.

My problem is that the result does not appear to be responsive?

website: http://www.strategynuts.com/strategy...Website_Design

The html I am using is:

<HTMLCODE> <ul id="floatingmenu"> <li><a rel="nofollow" href="http://www.strategynuts.com/strategy-nuts-pricing/#Website_Design"><img src="http://www.strategynuts.com/wp-content/uploads/2014/06/Webdesign_pricing_SPANISH.png" alt="" /></a></li> <li><a rel="nofollow" href="http://www.strategynuts.com/strategy-nuts-pricing/#Graphic_Design"><img src="http://www.strategynuts.com/wp-content/uploads/2014/06/Graphicdesign_pricing_SPANISH.png" alt="" /></a></li> <li><a rel="nofollow" href="http://www.strategynuts.com/strategy-nuts-pricing/#Digital_Marketing"><img src="http://www.strategynuts.com/wp-content/uploads/2014/06/DigitalMarketing_pricing_SPANISH.png" alt="" /></a></li> <li><a rel="nofollow" href="http://www.strategynuts.com/strategy-nuts-pricing/#Custom_Configuration"><img src="http://www.strategynuts.com/wp-content/uploads/2014/06/Custom_pricing_SPANISH.png" alt="" /></a></li> <li><img src="http://www.strategynuts.com/wp-content/uploads/2014/06/Questions.png" alt="Questions" /></li> </ul> </HTMLCODE>
 
The css I am using is:
<CSS>
#floatingmenu {
  padding: 0;
  margin: 0;
  position: fixed;
  right: 0;
  top: 15%;
  width: auto;
}
 
#floatingmenu li { 
      list-style-type:none; 
          margin: -4px;
          font-size: 0;
      } 
</CSS>