drop-down menu links 'overlapping' main responsive menu links (in mobile mode) ? 1

[c0deM0nK424]

I have been implementing a drop down responsive css menu - and this was my first ever attempt at it, with the aid of one or two tutorials.

As always, im trying to learn and grasps whats going on by 'typing' and 'executing' code then 'observing' the results on a 'screen' to understand whats going on...though I am convinced that I am not taking the time out to sit down, and understand some of the fundamentals behind what certain css rules are actualy doing to certain elements that make up the menu.


either way , i believe my understanding of the theory is strong enough to at least bypass serious theory study and delve right into the 'coding' - which is why so many of us come onto forums becayse we are not getting teh balance right, in taking some time out to sit down and 'read' and 'understand' intimately the css bible..

Here is my problem - its fairly simple, ive made a percentage based responsive css drop down menu which, at the breaking point - snaps into responsive mobile friend mode ( simply making the li widths 100%).

basicaly the problem is the set up - im using the slideToggle method, and have given an id to the parent 'li' that houses the dropdown ul, which itself has a class. When I CLICK the dropdown menu , i want the drop down menu (sub menu) links to 'push' the main menu links down.

Instead they're just overlapping.

Hopefully this will make things clear for you all:

https://jsfiddle.net/628vqn5y/1/

Q - what am i doing wrong , or simply what am i not doing ? is there something basic ive overlooked or is there a very simple mistake ive made somewhere ? Why , when the li that houses the ul.dropdown gets clicked, does the menu not push the main menu links downwards and instead overlaps them ??

id like to add, that i omitted the following from the media query at the bottom of the css which has no bearing to the question itself, but i wanted to mentioned it nonetheless incase i didnt need to delete those 3 lines.


ul li:hover ul.dropdown{
display:none; /* Dont Display the dropdown on hover! */ ;
}


ul li:active ul.dropdown{
display:none; position:absolute; height:auto; margin-top:2em;
}

ul li:focus ul.dropdown{
display:none; position:absolute; height:auto; margin-top:2em;

}

I omitted these 3 lines as i discovered they were not required ( the positions were all relative originaly but then changed to absolute for no reason other than the 'and lets see what happens when we change this to that' approach, something which has helped even the most accomplished intellectuals solve insanely puzzling problems. Sometimes we discover things by chance by just randomly changing stuff in code and when we see what happens we learn something new - and then we post a blog about what we've dsicovered. In this case, nothing was discovered heh.

so yeah, let me know whats up with the drop down menu folks. Would apprecaite it heaps.

ciao

 

[ChrisHirst]

Elements that are set with position: absolute; and position: fixed; are removed from the document flow so do NOT affect other elements.
Self promo link to the Positioning - The Kama Sutra of CSS

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[c0deM0nK424]

Thank you Chris, for that link.

anything which points me in the right direction, even if it requries learning/understanding a concept gets a thumbs up by me to be honest.


I actualy don't want anybody to provide an 'answer/solution/fix' to my post AT ALL.

I want to figure this out myself.

this is why i abstain from using forums entirely Chris, as it completely takes the satisfaction out of learning and understanding something yourself. The whole point of me enjoying web design and front end development is that im not as proficient as the 'senior web dev' types out there, but I enjoy knowledge aquisition and application ONCE ive thoroughly understood something.

 

[ChrisHirst]

My sentiments precisely, which is why I rarely provide the 'instant fix' that I see being provided so many times at the various fora where I participate. The fun is in actually learning things for oneself, "The pleasure of finding things out" is how Richard Feynman described it.



Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[c0deM0nK424]

OKAY get this Chris,

mate the problem lay with a lack of, this declaration inside the first media query:


ul li ul.dropdown { position:relative; }


thats all I had to do - and it works.


if you want the code you can email me - cos im taking the working solution off of jsfiddle.

HOWEVER, i have to make sure that the 'hover' stops working when you hit a suitable mobile viewport, and also prevent the slidetoggle jQuery to be locked for large viewports UNTIl we reach the mobile viewports etc heh

im guessing i need to fine tune the jQuery part a little bit, with an if statement to test for window width...


all the best

C0deM0nk Man

 

[c0deM0nK424]

how do i change the status of this post from 'open' to 'closed' now , Chris ?