Scrollable Drop-Down Menu On Browser Resize

Original question: http://stackoverflow.com/questions/25343191/how-can-i-prevent-the-horizontal-menu-from-breaking-when-the-browser-window-resi

HTML

<ul id="drop-nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a>

        <ul>
            <li><a href="#">Methods</a></li>
            <li><a href="#">Strategies</a></li>
            <li><a href="#">Phoneme Images</a></li>
            <li><a href="#">Alphabet Images</a></li>
        </ul>
    </li>
    <li><a href="#">Reading By The Rules</a>
        <ul>
            <li><a href="#">Joomla&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;nbsp;</a></li>
            <li><a href="#">Drupal&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;</a></li>
            <li><a href="#">Phoneme Images&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
        </ul>
    </li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Contact</a></li>
 </ul>

CSS

#drop-nav {
    width:500px;
}

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