CODEWITHSUNDEEP
htmlcss
user3664608
user3664608

Reputation: 333

Dropdown Menu Items are going down

I have a dropdown menu that contains the List of products of our company.I have an product names Hotel Management Solutions which i am trying to show in single line of dropdown menu but is coming in multiple lines.

Here Is the Fiddle..

Fiddle

Here is the HTML code..

<nav>
<ul style="padding-left: 3px">
    <li><a href="#">Products</a>

        <ul>
            <li><a href="#">Hotel Management Solutions </a>
            </li>
        </ul>
       </li>
      </ul>
</nav>

Please help me to display the content in One line only..

Upvotes: 0

Views: 64

Answers (4)

Mark Miller
Mark Miller

Reputation: 7447

Add white-space:nowrap to nav ul ul:

nav ul ul {
    background: #5f6975;
    border-radius: 0px;
    padding: 0;
    position: absolute;
    top: 100%;
    white-space:nowrap;
}

See Fiddle Demo

This will keep each list item on a single line without needing to set a fixed width.

Upvotes: 3

Tibs
Tibs

Reputation: 765

Replace your nav ul ul li a property declaration with this 

nav ul ul li a {
    padding: 1px;
    color: #fff;
    width: 200px;

}

Upvotes: 0

user2954774
user2954774

Reputation: 108

the only solution to this problem is to change the width of products div in the css

nav ul li a {
    display: block;
    padding: 25px 20px;
    color: #00a1e4;
    text-decoration: none;
    width:250px;

Upvotes: 0

Navneil Naicker
Navneil Naicker

Reputation: 3691

You need to add this style

ul > li > ul li{
    display: inline-block;
    float: left;
    padding: 5px;
}

Upvotes: 0

Related Questions