Question

I’m having trouble figuring this one out, it’s a menu I am changing a bit to make it more usable on touch devices. Thus I need the first part of the CSS to stay as it is for normal screens, and then have to overwrite it with the touch styles. But I am trying to position the sub menu of services below services when services is selected. See the sketch. I have created a fiddle to show my problem.

My main problem, and what would solve it, is that I can’t seem to get the ul.level_2 to position itself under the selected li, neither with absolute position or floating and clearing. Any ideas?

JS fiddle of problem

Answer 1

I sipmlyfied your example a bit to show you what is the minimal required css to achieve this. http://jsfiddle.net/3EKAq/10/

The positioning of the submenu should be fairly easy, it goes almost automaticly, no positioning required as you can see.

I think the key lies in the clearing of the menu element you want to appear on the left, the 4th one in this case. You could also consider working with the :n-th child css3 selector, but i would not do that for cross browser compatibility.

Hope this puts you in the right direction. Feel free to let us know if you need any more help!