prevent menu selections from wrapping

[ChuckRS]

When screen width is less then the design width(1200px) menu selections on the right are pushed down below the menu and to the left.

The 11 menu selections are list items with the drop down being an unsorted list containing list items. Float left is used to align the 11 selections side by side

Is there something that will keep all menu selections on the same line?

[Beverleyh]

Hard to say without some sample markup and CSS to work with.

A live page works best so we can offer suggestions based on *your code* - cut back to the pertinent parts to make things easier to see (no one like wading through lots of code)

If you can't post a link for a page on your server, you can build up a live demo in JSBin, JSFiddle or CodePen, then post a link to that instead.

[ChuckRS]

Both css and html at

https://jsfiddle.net/#&togetherjs=3L9vB10pao

[Beverleyh]

I'm not sure what you mean by 'selections' but if you mean that you want all the top level li buttons to stay say on one line, try adding a width to #navmenu. E.g;
#navmenu { width:1200px }However, this will make the buttons on the right inaccessible on small screens.

[ChuckRS]

Beverleyh - thanks for checking up on me.

Is there a different CSS that will enable a right scroll to access all buttons?

Can z-index be used so top level button selections will display over buttons that are below?

[Beverleyh]

Can z-index be used so top level button selections will display over buttons that are below? Yes, if you remove this;
ul#navmenu li { z-index:1; }

You might want to re-think this menu though because in the fiddle, the dropdowns don't work on iOS (iphone / ipad)

[Beverleyh]

Here's something more streamline to start you off https://jsbin.com/pebajajaca/1/edit?html,css,output

Be aware that hover-activation behaviour differs between Android and iOS, so parent buttons with sub-menus shouldn't be linked (hence why I've used javascript:void(0) in the demo). This is because on Android the href is immediately activated, so there would be no way to access the sub-menus underneath. iOS however, allows a 2-stage tap where, even if the parent has a link, the first tap activates the dropdowns and the 2nd tap activates the parent's href.

[ChuckRS]

Removal of z-index:1 from ul#navmenu li gave the exact result I wanted. Though here in Houston, I will raise a Crunchie or Rowntrees Fruit Pastilles to you

I will look into the iOS matter but not sure if the modification would be effective due to the small screens. The site is up to 1,200 images (GIF and JPEG) with the vast majority being 1000px to 1200px wide with almost every page having some of them. The site was designed around the size needed to adequately show the content so screen resolution of viewing devices was not a concern. Sorta after the fact, I looked into screen resolution and found width of 1280px and up is the vast majority of monitors.

My folder structure will need adjustments but will wait until the construction is finished. For now I am letting the content determine what goes where

[Beverleyh]

I will look into the iOS matter but not sure if the modification would be effective due to the small screens.Its not so much the size that's an issue, but the accessibility of your content. At the moment, the sub-menus cannot be activated on any iOS touch device, so how will visitors explore your site?. All this demo (https://jsbin.com/pebajajaca/1/edit?html,css,output) is, is an alternative CSS hover menu (as free from styling as I can make it without losing the essence of its usability), which *does* work in an iOS touch environment, so that you can add your own styles back to it.

You have no control over how your visitors choose to view your website (Kindle, iPad, their TV, or the latest Surface Pro) so I'm just trying to give you a slightly more accessible route to allow them to reach your content.

[ChuckRS]

The site should at least be accessible via iOS and will so modify the menu. Thanks for your time and passing on your expertise

[Beverleyh]

No problem.

[Ripsaw]

Thanks for the demo menu Beverleyh. I can now see how easy a hover-over CSS menu can be now that you presented one so clearly!

I was looking at some of the menus on your personal website. Am I right in thinking that the page linked below offers the same kind of CSS hover-over menu but with the extra hidden draw for mobiles size screens?

http://fofwebdesign.co.uk/freebies-for-websites/css/multi-rwd-menu.htm

[Beverleyh]

Yes, give or take a bit of extra markup (checkboxes) and CSS. But the revised version works better on touchscreens http://fofwebdesign.co.uk/freebies-for-websites/css/multi-rwd-drop-down-menu.htm

[Ripsaw]

Noted. Thanks again :)

[Beverleyh]

You're welcome :)