CSS菜单：div限制的下拉项目的宽度

Question

自从我将表格移到div后，我的下拉菜单出现问题。在表格中，子菜单显示完美，但是现在它们在div中，更宽的子菜单项目被包裹在最右边的菜单项下面。

这是fiddle，查看项目2和项目3下面的子菜单之间的差异。项目4和项目5（最右侧）的相同帐户。如何设置div的宽度以使其考虑子菜单的宽度？

HTML：

<div id="headerimg">
<div id="header">
    <div id="headercontent">    

        <div style="float: left; padding: 25px 50px 0 0;"><a href="home"><img src="" alt=""></a></div>

        <div style="float: left; padding-top: 48px">
            <nav>
                <ul style="font-weight: bold; font-size: 18px;"><!--
                --><li style="background-image: url(images/MenuBGres.png);"><a class="MenuLinks1" href="">MENU ITEM 1</a><!--
                    --><ul><!--
                        --><li><a href="">Option 1</a></li><!--
                        --><li><a href="">Much longer option 2</a></li><!--                 --><li><a href="">Longer option 3</a></li><!--
                    --></ul><!--
                --></li><!--
                --><li style="background-image: url(images/MenuBGind.png);"><a class="MenuLinks1" href="">MENU ITEM 2</a><!--
                    --><ul><!--
                        --><li><a href="">Option 1</a></li><!--
                        --><li><a href="">Much longer option 2</a></li><!--                 --><li><a href="">Longer option 3</a></li><!--
                    --></ul><!--
                --></li><!--
                --><li style="background-image: url(images/MenuBGres.png);"><a class="MenuLinks1" href="">MENU ITEM 1</a><!--
                    --><ul><!--
                        --><li><a href="">Option 1</a></li><!--
                        --><li><a href="">Much longer option 2</a></li><!--                 --><li><a href="">Longer option 3</a></li><!--
                    --></ul><!--
                --></li><!--
            --></ul>
            </nav>
        </div>

        <div style="float: right; clear: right; margin-right: 8px;" id="language">
            <form name="languagelist">
                <select name="translate" size="1" onChange="go()">
                    <option value="main" selected>English</option>
                    <option value="es/main">Espa&ntilde;ol</option>
                </select>
            </form>
        </div>

        <a href="login"><div style="float: right; clear: right; margin-top: 24px; margin-right: 16px;" id="button">LOGIN</div></a>

        <div style="float: right; clear: right; padding-top: 10px;">
            <nav>
                <ul><!--
                --><li><a class="MenuLinks2" href="">MENU 4</a><!--
                    --><ul><!--
                        --><li><a href="">Option 1</a></li><!--
                        --><li><a href="">Much longer option 2</a></li><!--                 --><li><a href="">Longer option 3</a></li><!--
                    --></ul><!--
                --></li><!--
                --><li><a class="MenuLinks2" href="support/contactus">MENU 5</a><!--
                    --><ul><!--
                        --><li><a href="">Option 1</a></li><!--
                        --><li><a href="">Much longer option 2</a></li><!--                 --><li><a href="">Longer option 3</a></li><!--
                    --></ul><!--
                --></li><!--
            --></ul>
            </nav>
        </div>

    </div>
</div>
</div>

CSS：

nav ul {
position: relative;
list-style: none;
padding: 0;
margin: 0;
font-size: 16px; 
white-space: nowrap;
}
nav ul:after {
    content: ""; 
    clear: both; 
}
nav > ul > li {
display: inline-block;
    margin-right: 10px;
background-repeat: no-repeat; 
background-position: center top;
}
nav > ul > li > a {
display: block;
padding: 10px 5px 10px 5px;
color: #ffffff; 
text-decoration: none;
}
nav ul li:hover ul li a{
    color: #ffffff;
}

/* Set properties for hiding/unhiding dropdown items */ 
nav ul > li:hover ul, nav > ul > li a:hover ul{
    height: auto;
    max-height: 250px;
    margin-left: -10px;
    margin-top: 5px;
    padding-right: 10px;
    border: 2px solid rgb(233,255,175);
    border-top: none;
    border-radius: 0 0 10px 10px; 
    -webkit-box-shadow: 0px 3px 5px 3px rgba(100, 100, 100, 0.5);
    -moz-box-shadow:    0px 3px 5px 3px rgba(100, 100, 100, 0.5);
    box-shadow:         0px 3px 5px 3px rgba(100, 100, 100, 0.5);
}

/* Set general properties for dropdown menu items */    
nav ul ul {
position: absolute;
max-height: 0; 
overflow: hidden;
background: #018c3b;
border: 2px solid rgb(233,255,175);
border-bottom: none;
border-top: none;
border-radius: 0 0 10px 10px; 
margin-top: 5px;
margin-left: -10px;
padding-right: 10px;
-webkit-transition: max-height 0.4s ease-in;
-moz-transition: max-height 0.4s ease-in;
-o-transition: max-height 0.4s ease-in;
-ms-transition: max-height 0.4s ease-in;
transition: max-height 0.4s ease-in;
}

nav ul ul li {
border: 0;
position: relative;
display: block;
padding: 0;
width: auto;
-webkit-transition: background-color 0.4s ease;
-moz-transition: background-color 0.4s ease;
-o-transition: background-color 0.4s ease;
-ms-transition: background-color 0.4s ease;
transition: background-color 0.4s ease;
}

nav ul ul li + li a{
        border-top: 1px solid #C9CCCF;
    }
nav ul ul li a {
        display: block;
        margin-left: 8px;
        padding: 8px 5px 8px 5px;
        text-decoration: none;
        font-size: 14px;
        font-weight: normal;
        color: #ffffff;
        white-space: normal;
    }   
        nav ul li:hover ul li a:hover {
            background: #a0c94c;
            color: #ffffff;
        }
        nav ul {
position: relative;
list-style: none;
padding: 0;
margin: 0;
font-size: 16px; 
white-space: nowrap;
}
nav ul:after {
    content: ""; 
    clear: both; 
}
nav > ul > li {
display: inline-block;
    margin-right: 10px;
background-repeat: no-repeat; 
background-position: center top;
}
nav > ul > li > a {
display: block;
padding: 10px 5px 10px 5px;
color: #ffffff; 
text-decoration: none;
}
nav ul li:hover ul li a{
    color: #ffffff;
}

/* Set properties for hiding/unhiding dropdown items */ 
nav ul > li:hover ul, nav > ul > li a:hover ul{
    height: auto;
    max-height: 250px;
    margin-left: -10px;
    margin-top: 5px;
    padding-right: 10px;
    border: 2px solid rgb(233,255,175);
    border-top: none;
    border-radius: 0 0 10px 10px; 
    -webkit-box-shadow: 0px 3px 5px 3px rgba(100, 100, 100, 0.5);
    -moz-box-shadow:    0px 3px 5px 3px rgba(100, 100, 100, 0.5);
    box-shadow:         0px 3px 5px 3px rgba(100, 100, 100, 0.5);
}

/* Set general properties for dropdown menu items */    
nav ul ul {
position: absolute;
max-height: 0; 
overflow: hidden;
background: #018c3b;
border: 2px solid rgb(233,255,175);
border-bottom: none;
border-top: none;
border-radius: 0 0 10px 10px; 
margin-top: 5px;
margin-left: -10px;
padding-right: 10px;
-webkit-transition: max-height 0.4s ease-in;
-moz-transition: max-height 0.4s ease-in;
-o-transition: max-height 0.4s ease-in;
-ms-transition: max-height 0.4s ease-in;
transition: max-height 0.4s ease-in;
}

nav ul ul li {
border: 0;
position: relative;
display: block;
padding: 0;
width: auto;
-webkit-transition: background-color 0.4s ease;
-moz-transition: background-color 0.4s ease;
-o-transition: background-color 0.4s ease;
-ms-transition: background-color 0.4s ease;
transition: background-color 0.4s ease;
}

nav ul ul li + li a{
        border-top: 1px solid #C9CCCF;
    }
nav ul ul li a {
        display: block;
        margin-left: 8px;
        padding: 8px 5px 8px 5px;
        text-decoration: none;
        font-size: 14px;
        font-weight: normal;
        color: #ffffff;
        white-space: normal;
    }   
        nav ul li:hover ul li a:hover {
            background: #a0c94c;
            color: #ffffff;
        }

Answer 1

找到解决方案。在nav ul ul li a中，我只是简单地white-space: nowrap（从normal更改了它，忘了为什么我把它放在那里......）。希望它对任何人都有用。