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

自从我将下拉菜单从表格移动到div后，我的下拉菜单就出现了问题。在表格中，子菜单显示得非常好，但是现在它们位于div中，较宽的子菜单项被包装在最右侧的菜单项下面

下面是第二项和第三项下的子菜单之间的区别。第4项和第5项（最右侧）的说明相同。如何设置div的宽度，以便将子菜单的宽度考虑在内

HTML:

---

找到了解决办法。在

nav ul ul li a

中，我简单地将

空白：nowrap

（将其从

normal

更改，忘记了我为什么首先将其放在那里…）。希望它对任何人都有用。

有人知道吗？这里有一把小提琴供你摆弄。。。

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

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;
        }