缩放时菜单中断

Question

我想创建一个页面，但是当我放大时菜单总是中断。这是我的代码，我做错了什么?我的页面没有创建一个水平滚动条和李的落在包装下的一张图片，在这种情况下该怎么办?我找了几个小时，仍然没有找到解决我的问题....

#wrapper {
    width:100%;
    height:90px;
    background-color:#D96459;
    border-bottom: 5px solid #8C4646;
    margin-bottom:5px;
}
#menu {
    width:60%;
    height:100%;
    background-color:#D96459;
    float:right;
    margin-right:10%;
    margin-bottom:5%;
    align:right;
}
#menu ul li {
    list-style: none;
    display: inline-block;
}
#menu ul li a {
    text-decoration: none;
    font-size:25px;
    padding:15px;
    color:white;
    white-space: nowrap;
    display:block;
}
#menu ul li a:hover {
    background-color:#8C4646;
    display:block;
}
#menu li ul {
    display:none;
}
#menu ul li:hover > ul {
    display: block;
}
li:hover ul {
    display: block;
    position:absolute;
}
li:hover li {
    float: none;
}
li:hover a {
    background: #D65656
}
#menu li:hover li a:hover {
    background-color:#3287C0
}
#menu ul li ul li {
    border: 1px solid #06568F;
    ;
    margin:0px;
    display:block;
    margin-left:-38px;
}

<div id="wrapper"> 		
    <img src="poze/grill.jpg" style="height:100%;margin-left:10%;">
    <div id="menu">
        <ul>
            <li><a href="">Acasa</a></li>
			<li><a href="">Gratare</a></li>
			<li><a href="">Seminee</a></li>
			<li><a href="">Sobe</a></li>
			<li><a href="">Cuptoare</a></li>
			<li><a href="">Placari</a></li>
			<li><a href="">Contact</a></li>
        </ul>
    </div>
</div>

Answer 1

这将防止打破:

   #menu {white-space: nowrap;}