Here is the responsive CSS-3 Menu bar that i created , [the entire code is not mine though].
Well here are a few difficulties i have ,
1st check out the Jsfiddle Fiddle
Ok . So , go to the "ul" styling right at the top I.E.
ul { list-style-type:none; margin:0; padding:0; position: absolute;}
and take off position absolute , now run the fiddle and hover over Portfolio , SEE !!!!! How portfolio expands ??? Well can somebody tell me why ?
now Difficulty no 2 .
Go to the media Queries part right at the end and u'll see the same menu has been re-style as follows :
@media screen and (max-width : 760px){ /*Make dropdown links appear inline*/ ul { position: static; display: none; } }
now take off the "position:static" style and run the fiddle , now try minimizing the results section of the fiddle and and lastly click over "Show menu" , now u'll notice that the drop down menu is not aligned to the portion that says "Show menu" . Why ? whats sooo espical about "position:static" , that i have't Discovered ?? .
I know my code will take a while to go through , so i appreciate your time . this is an important question as a menu forms the basis of any website , sorry if my question seens silly . your time , and guidance is Highly appreciate .
Kind Regards .
Gautam.