缩放时菜单中断

Question

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

这可以防止破坏：

   #menu {white-space: nowrap;}