CSS - How to display dropdown text in one row?


Tags: html,css,menu,drop-down-menu

Problem :

I'm building a dropdown menu and I've got an issue showed on this img: enter image description here

I want the "2.1" text to be displayed next to the "Item" text. For some reaason, every new word gets a new line.

Here's the html:

<ul id='nav'> 
    <li><a href='/'>Item 1</a></li>
    <li><a href='/'>Item 2</a>
        <ul>
            <li><a href='/'>Item 2.1</a></li>
        </ul>
    </li>
    <li><a href='/'>Item 3</a></li>
    <li><a href='/'>Item 4</a></li>
    <li><a href='/'>Item 5</a></li>
</ul>

And here's the CSS:

#nav {
    list-style: none;
}
#nav li {
    float: left;
    position: relative;
}
#nav li a {
    display: block;
    text-decoration: none;
    text-align: center;
    background: #ccc;
    margin-right: 5px;
}
#nav li ul {
    position: absolute;
}
#nav li ul li {
    display: block;
}
#nav li ul li a {
    padding: 0px 10px;
    height: 20px;   
    text-align: left;
    background: #999;
}

Thanks for any help, Mike.



Solution :

An easy way to fix this is adding a nowrap property to #nav li ul li a:

#nav li ul li a {
    padding: 0px 10px;
    height: 20px;   
    text-align: left;
    background: #999;
    white-space: nowrap;  /* Forbids text wrapping */
}

    CSS Howto..

    AngularJS - how to set css class for the custom directive?

    How to arrange/align two paragraphs into boxes [duplicate]

    How to hide and show div with button? How to add effect to the button when show the div?

    how to do responsive with css grid and reversed order of elements

    How to centrally align a float: left ul/li navigation menu with css?

    How to make div position fixed without floating

    how to target css for ie9 only?

    How to set width correctly in CSS - Need to fix bug with Safari on Mac and on iPad

    How to add and remove a current state to a link when another is clicked using jQuery

    How many digits after the decimal point are interpreted in stylesheet rules?

    How to float

    to bottom of a

    when you can't use position:relative and position:absolute

    How can i improve my javascript? codepen included

    How to write this :not “in other element” CSS rule?

    how to show button and images in one line using css

    How can the css dottled border be implemented?

    How to display message inline

    How to display child elements of
  • at 100% height?
  • How to change table width using css

    How to target specific img using css

    How to get CSS styling to shown on page? [closed]

    How to center arrow on post carousel

    how to set primefaces datatable columns padding with CSS padding

    How to have different input text styles in same html form?

    How to use CSS in ASP.NET application

    jquery show() not displaying properly for highcharts graph

    Can someone help explain how the css3 calc() method actually works?

    How to restrict ol, ul css to a div?

    HTML/CSS - How do I make divs to size according to their contents?

    How to render a template with dynamic CSS?

    How to align/move Vaadin buttons