Dropdown menu item moves other elements to the right

Question

I've been trying to create this basic menu from scratch but I've got a little problem: whenever I hover the 'Categories' menu for example(which is a dropdown element), the elements to the right get automatically moved even farther.

HTML:

<div id = "navbar">
    <ul>
        <li>News</li>
        <li>News</li>
        <li>News</li>
        <li>News</li>
        <li>Market</li>
        <li class = "navbar_multiple">&nbsp;&nbsp;Categories
            <ul>
                <li>Travel</li>
                <li>Entertainment</li>
                <li>Fun</li>
            </ul>
        </li>
        <li>Fun</li>

    </ul>
</div>

CSS: apparently too long - but included in the jsFiddle below

Here's the jsFiddle: http://jsfiddle.net/ktvde9qo/4/

I want to make it so that when the user hovers over the 'Categories' item, it would create the dropdown menu under it but keep its dimension as it was. How can I do that?

Answer 1

Get rid of the width in #navbar > ul > li.navbar_multiple:hover > ul > li:

#navbar > ul > li.navbar_multiple:hover > ul > li {
    display:block;
    height:20px;
    padding-left: 10px;
    margin-left: 0px;
}

Updated your fiddle: http://jsfiddle.net/ktvde9qo/11/

EDIT: To make all submenu items have the same width, simply remove (or comment out) the following lines, alternatively modify them for your needs:

#navbar > ul > li > ul > li:first-child {
    margin-top: 8px;
    padding-top: 9px;
    width: 100%;
}

Fiddle updated: http://jsfiddle.net/ktvde9qo/13/

EDIT 2: To make the submenu items longer than the main menu item, just add a longer width to the submenu item and a shorter one to the main:

The submenu item:

#navbar > ul > li > ul > li {
    padding-left: 0px;
    display: none;
    text-transform: none;
    font-size: 12px;
    padding: 4px 4px 8px 6px;
    padding-top: 10px;
    border-top: 1px solid #39718e;
    background-color: #316885;
    width:200px; /* changed this */
}

The main menu item:

#navbar > ul > li.navbar_multiple {
    margin-left: 13px;
    width:100px; /* changed this */
}

Final fiddle update: http://jsfiddle.net/ktvde9qo/18/

Answer 2

I think you are looking for something like that:

css

#navbar {
height: 35px;
background-color: #4c9fcd;
position: relative;
top: 0px;
z-index: 1001;
}

#navbar > ul {
list-style: none;
text-align: left;
padding-left: 25px;
margin-top: 0px;
}

#navbar > ul > li
{
float: left;
margin-left: 21px;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
text-transform: uppercase;
color: #fff;
border-top: 2px solid transparent;
padding-top: 8px;
}

#navbar > ul > li:first-child {
margin-left: 0px;
}

#navbar > ul > li.navbar_multiple {
margin-left: 13px;
//padding-left: 5px;
}

#navbar > ul > li:hover {
border-top: 2px solid white;
cursor: pointer;
//background-color: #316885;
}

#navbar > ul > li > ul {
list-style: none;
position: relative;
margin-left: 0px;
padding-left: 0px;
}

#navbar > ul > li > ul > li {
padding-left: 0px;
display: none;
text-transform: none;
font-size: 12px;
padding: 4px 4px 8px 6px;
padding-top: 10px;
border-top: 1px solid #39718e;
background-color: #316885;
}

#navbar > ul > li > ul > li:first-child {
margin-top: 8px;
padding-top: 9px
}

#navbar > ul > li > ul > li:last-child {
border-bottom: 3px solid #4c9fcd;
}

#navbar > ul > li.navbar_multiple:hover > ul > li {
display: block;
height:20px;
padding-left: 10px;
margin-left: 0px;
}

#navbar > ul > li.navbar_multiple > ul > li:hover {
background-color: #0d3f5a;
}

#navbar > ul > li.navbar_multiple:hover {
background-color: #316885;
padding-right: 0px !important;
}

fiddle

Answer 3

I would try the following approach using the following CSS:

#navbar > ul > li
{
float: left;
margin-left: 21px;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
text-transform: uppercase;
color: #fff;
border-top: 2px solid transparent;
padding-top: 8px;
    position: relative;
    line-height: 1.5;
    height: 24px;
}

#navbar > ul > li > ul {
list-style: none;
position: absolute; /* change this */
margin-left: 0px;
padding-left: 0px;
    margin-top: -5px; /* this can control the whitespace... */
}

Add position: relative to the li elements in your primary navigation, and add some line height and height values as needed.

For the secondary navigation, change position to absolute on the ul and tweak the top margin to close any whitespace.

See demo at: http://jsfiddle.net/audetwebdesign/adw5hp84/

By using absolute positioning of the secondary menus, you take them out of the flow of the main menu bar and you don't have to worry that the length of the labels will affect the primary navigation layout.

Note that there is probably more detailed work to be done on styling the spacing between links and so on.

Answer 4

Can you try it?

If contents will add in drop down list like Entertainment to Entertaiment Daily Programs also this will be works

#navbar > ul > li > ul{
 width:150px;
}