How can I prevent the horizontal menu from breaking when the browser window resizes? - resize

Question

The problem is when I make the browser window smaller, the menu breaks. How can I prevent this from happening (I am new to this!)? It would be helpful to point out errors in my code or what needs to be changed.
Here is my css code:
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;
}
Here is my html code:
<ul id="drop-nav">
<li>Home</li>
<li>About
<ul>
<li>Methods</li>
<li>Strategies</li>
<li>Phoneme Images</li>
<li>Alphabet Images</li>
</ul>
</li>
<li>Reading By The Rules
<ul>
<li>Joomla nbsp;</li>
<li>Drupal </li>
<li>Phoneme Images </li>
</ul>
</li>
<li>Products</li>
<li>Contact</li>
</ul>

Answer 1

Without trying to change your existing CSS, a simple fix will be to assign a fixed width to your #drop-nav. On re-sizing the browser, your content will become scrollable.
Live demo on fiddle.