Click here to Skip to main content
Rate this: bad
good
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:
 
UL
  LI
  LI
    UL 
      LI 
        LI 
  LI
 
Now the output would be
 
M1 M2      M3    M4
    M2.1           M4.1
                     M4.2

 
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
overflow:auto
and tried
whitespace:nowrap
on ULs. But no avail. How do we achieve this?
Posted 4-Apr-13 6:10am
Comments
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 http://www.css3menu.com/elegant-dark-menu.html 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 asp.net page using javascript file ?
Rate this: bad
good
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
overflow:visible;
instead of
overflow:auto;
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

You were on the right track on the UL level, with
white-space:nowrap;
overflow:auto;
 
But you also need this style on the LI elements:
display:inline;
 
If you already tried that and it still didn't work, then it's because you misspelled "white-space" (you left out the dash).
  Permalink  

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

  Print Answers RSS
0 OriginalGriff 443
1 Sergey Alexandrovich Kryukov 197
2 PhilLenoir 145
3 RyanDev 125
4 Richard Deeming 120
0 Sergey Alexandrovich Kryukov 6,415
1 OriginalGriff 5,856
2 CPallini 2,473
3 Richard MacCutchan 1,667
4 Abhinav S 1,530


Advertise | Privacy | Mobile
Web01 | 2.8.140821.2 | Last Updated 8 Apr 2013
Copyright © CodeProject, 1999-2014
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