Click here to Skip to main content
12,818,508 members (29,570 online)
Rate this:
Please Sign up or sign in to vote.
See more: CSS HTML
I am trying to create a CSS Menu Item using UL/LI (Heirarchial). I am able to create a structure like below:


Now the output would be

M1 M2      M3    M4
    M2.1           M4.1

Now what is happening is after M12, because screen space is restricted it renders as

M1 M2 M3 M4 M5 M6 M7 M8 M9 M10 M11 M12

M13 M14 M15 M16 

I am looking to have every menu item in the single line like below (even if it creates an horizontal scrollbar in the browser):

M1 M2 M3 M4 M5 M6 M7 M8 M9 M10 M11 M12 M13 M14 M15 M16 

I tried to wrap the topmost UL within a DIV with style
and tried
on ULs. But no avail. How do we achieve this?
Posted 4-Apr-13 7:10am
Monster Maker 4-Apr-13 13:28pm
can't you avoid, the nesting of ul's and M1-M16 put in li,,??
Vasudevan Deepak Kumar 4-Apr-13 13:43pm
It is a child menu right, something similar to within the inset box captioned "Elegant Dark CSS3 Menu Template". How would we then get the hierarchy sans nesting?
Prasad Khandekar 4-Apr-13 15:59pm
Instead of overflow:auto have u tried using overflow:scroll? It will create a scrollbar for the container div. Other way is to give the container div sufficient width, but in that case even for smaller hierarchy it will render a scrollbar on browser.
vinodkumarnie 5-Apr-13 7:53am
Can you share your source code..?
Radha Krishnanj 8-Apr-13 13:26pm
after hosting my Web Application,how to update page using javascript file ?
Rate this: bad
Please Sign up or sign in to vote.

Solution 3

The solution I gave earlier ensures that all items are on a single line and generates a scrollbar when needed. If you are saying that you would rather have the entire page widen, with a scrollbar at the page level, then use

instead of
Rate this: bad
Please Sign up or sign in to vote.

Solution 1

You were on the right track on the UL level, with

But you also need this style on the LI elements:

If you already tried that and it still didn't work, then it's because you misspelled "white-space" (you left out the dash).

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

    Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise | Privacy | Mobile
Web02 | 2.8.170308.1 | Last Updated 8 Apr 2013
Copyright © CodeProject, 1999-2017
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100