Currently, I am in the process of creating a navigation system that includes a background image slide effect. My goal is to mimic the design of a specific website: http://tympanus.net/Tutorials/BeautifulBackgroundImageNavigation/
However, my challenge lies in adapting this effect for mobile phones with a screen size of 480*800. This means adjusting the size of elements which has proven to be problematic as I strive for an exact replication of the original website's design. Here is my progress so far: http://jsfiddle.net/u4mLdojo/
The issue primarily revolves around sub1, sub2, and sub3; these components are meant to stay hidden until clicked, yet they seem to remain visible on the page despite my efforts.
<ul class="sub1" style="background-position:0 0;">
<ul class="sub2" style="background-position:-100px 0;">
<ul class="sub3" style="background-position:-100px 0;">