Click here to Skip to main content
Rate this: bad
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 at 4-Apr-13 13:28pm
can't you avoid, the nesting of ul's and M1-M16 put in li,,??
Vasudevan Deepak Kumar at 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 at 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 at 5-Apr-13 7:53am
Can you share your source code..?
Radha Krishnanj at 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
0 OriginalGriff 425
1 Peter Leow 195
2 Zoltán Zörgő 150
3 Afzaal Ahmad Zeeshan 115
4 DamithSL 100
0 Sergey Alexandrovich Kryukov 7,442
1 OriginalGriff 5,996
2 Peter Leow 4,292
3 CHill60 2,858
4 Mika Wendelius 2,850

Advertise | Privacy | Mobile
Web04 | 2.8.150224.1 | Last Updated 8 Apr 2013
Copyright © CodeProject, 1999-2015
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