Hello,
I made a menu that is similar to reddit.com but on lower resolutions, the menu stacks on top of the other, instead of remaining 1 bar, it becomes 3 or 4 bars.
How do I make it like on reddit.com where the top menu gets cut off and doesn't stack on each other?
white-space: nowrap;
overflow: scroll;
It doesn't seem to work, it just puts a scrollbar in the div of the horizontal menu bar.
I'm currently doing this menu offline, but I uploaded it to jsfiddle:
http://jsfiddle.net/s5hMW
You can save over it if you manage to make it work.
Easiest way would be to look at Reddit's CSS via the Inspect Element in Firefox/Chrome.
I looked through it and came up with this as the bare minimum
http://jsfiddle.net/N2gTu/1/
I was playing around with your fiddle and managed to get it working, I had to get rid of the position relative and float left of the first-level menu items and get rid of the display:block for the top-level links (as well as removing the -moz specific section)
Hey,
Could you update my fiddle with your code?
Though I'll try and update it with what you said. I did look at reddits CSS with Firebug, and just couldn't realize what I needed to add or remove in my CSS.
Ehh, I had a go but I can't for the life of me get the dropdown menus working
http://jsfiddle.net/s5hMW/4/
I'm not sure the dropdown menu on Reddit could be utilised because that only does it for the first item, and not the things that wrap off the edge of the screen.