Меню прерывается при масштабировании

Question

Я хочу создать страницу, но меню всегда ломается, когда я увеличиваю масштаб. Это мой код, что я делаю неправильно? моя страница не создает горизонтальную полосу прокрутки, а li подпадает под обертку на фоне антиет, что делать в этой ситуации? Я ищу в течение нескольких часов и до сих пор я не нашел решение моей проблемы ....

#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"> \t \t 
 
    <img src="poze/grill.jpg" style="height:100%;margin-left:10%;"> 
 
    <div id="menu"> 
 
     <ul> 
 
      <li><a href="">Acasa</a></li> 
 
\t \t \t <li><a href="">Gratare</a></li> 
 
\t \t \t <li><a href="">Seminee</a></li> 
 
\t \t \t <li><a href="">Sobe</a></li> 
 
\t \t \t <li><a href="">Cuptoare</a></li> 
 
\t \t \t <li><a href="">Placari</a></li> 
 
\t \t \t <li><a href="">Contact</a></li> 
 
     </ul> 
 
    </div> 
 
</div>

Answer 1

Это предотвратит нарушение:

#menu {white-space: nowrap;}