Click here to Skip to main content
12,251,445 members (62,323 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:

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 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 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 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 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
Top Experts
Last 24hrsThis month


Advertise | Privacy | Mobile
Web02 | 2.8.160426.1 | Last Updated 8 Apr 2013
Copyright © CodeProject, 1999-2016
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