Как я могу предотвратить разрыв горизонтального меню, когда окно браузера изменяется? ⇐ CSS

[Anonymous]

Проблема в том, что когда я делаю окно браузера меньше, меню ломается. Как я могу предотвратить это (я новичок в этом!)? Было бы полезно указать на ошибки в моем коде или что нужно изменить.
Вот мой код CSS: < /p>

ul {
margin: 0px;
padding: 0px;
list-style-type: none;
list-style-image: none;
list-style-position: outside;
overflow: visible;
position: static;
}
ul li {
border: 1px solid #000000;
display: block;
position: relative;
float: left;
right: -4px;
background-color: white;
}
li ul {
display: none;
background-color: #3333ff;
}
ul li a {
padding: 10px 18px 5px 90px;
background: #3333ff none repeat scroll 0% 50%;
text-decoration: none;
white-space: nowrap;
color: #ffffff;
overflow: visible;
text-align: center;
display: block;
}
ul li a:hover {
background: #3366ff none repeat scroll 0% 50%;
overflow: visible;
}
li:hover ul {
display: block;
position: absolute;
overflow: visible;
}
li:hover li {
float: none;
background-color: #3366ff;
}
li:hover a {
background: #2346b1 none repeat scroll 0% 50%;
}
li:hover li a:hover {
background: #40a3f6 none repeat scroll 0% 50%;
}
#drop-nav li ul li {
border-top: 0px none;
overflow: visible;
visibility: visible;
width: 140px;
font-family: Arial, Helvetica, sans-serif;
display: table-row-group;
text-align: left;
}
< /code>

Вот мой html -код: < /p>

• Home
• About
  
  
  Methods
• Strategies
• Phoneme Images
• Alphabet Images

[*]Reading By The Rules

• Joomla          nbsp;
• Drupal            
• Phoneme Images     

[*]Products
[*]Contact



Подробнее здесь: https://stackoverflow.com/questions/253 ... indow-resi