How to make the LI items in UL go straight in one line?

Question

4.00/5 (1 vote)

See more:

I am trying to create a CSS Menu Item using UL/LI (Heirarchial). I am able to create a structure like below:

HTML

UL
  LI
  LI
    UL 
      LI 
        LI 
  LI

Now the output would be

HTML

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

HTML

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):

HTML

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

CSS

overflow:auto

and tried

CSS

whitespace:nowrap

on ULs. But no avail. How do we achieve this?

Posted 4-Apr-13 6:10am

Vasudevan Deepak Kumar

Add a Solution

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 Krishnan J 8-Apr-13 13:26pm

after hosting my Web Application,how to update asp.net page using javascript file ?

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Brian A Stephens · Answer 1 · 2013-04-08T06:16:00

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;

Posted 8-Apr-13 6:16am

Brian A Stephens

Brian A Stephens · Answer 2 · 2013-04-05T16:36:00

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).

Posted 5-Apr-13 16:36pm

Brian A Stephens