CSS Navbar changes size on different sized screens - html

Question

I am doing a website for school, and it's been going well. The only problem I am stuck on is this: The navbar changes size on different sized screens. It's most readily apparent when zooming out, but it is slightly off on different screens.
Here is a screenshot of what I mean:
https://docs.google.com/a/g.ccsd.net/file/d/0B_Sda_-LouAKbnVKVHhMSW5yeXc/edit?usp=sharing
Please note that the left side, which is the problem, moves around a lot depending on the scale. The above image is only one example.
This is my CSS:
ul {
font-family: 'Open Sans', Times;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
position: relative;
float: right;
z-index: 150;
/* min-width: 739px;
max-width: 739px; */
}
ul li {
display: block;
position: relative;
float: right;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 7px solid #CC4D4D;
padding: 25px 26.45px 30px 26.45px; /*top right bottom left*/
background: #333333;
margin-left: 0px;
white-space: nowrap;
}
ul li a:hover { background: #757575; }
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #757575; }
li:hover li a:hover { background: #757575; }
This is my HTML:
<ul id="menu">
<li>Showcase</li>
<li>Contact</li>
<li>FAQ</li>
<li>Faculty
<ul>
<li>Mrs. Rosarita Olvina</li>
<li>Mrs. Christine Pavesich</li>
<li>Mr. Francisco Virella</li>
<li>Mrs. Susan Williams</li>
</ul>
</li>
<li>Program Areas
<ul>
<li>Graphic Design</li>
<li>Photography</li>
<li>Video Production</li>
<li>Animation</li>
<li>Art</li>
</ul>
</li>
<li>About
<ul>
<li>What We Do</li>
<li>Where We Go</li>
</ul>
</li>
<li>Home</li>
</ul>
Thank you for any help.
***I tried first answer, it didn't work, but I may be doing it very wrong.

Answer 1

The problem is not necessarily within the menu. Rather the whole menu (or its container) needs to be placed properly.
As far as I can tell from the code you've given, the floats may also play a part in fixing this. The whole menu and nested ULs are floating. My suggestion would be to avoid these floats and work with "display: inline-block" instead to get the horizontal arrangement.
After streamlining the menu entries like that, you can properly position your whole menu container in the surrounding HTML.
In case you don't already use it: Firebug or Chromebug plugins are really handy for identifying errors like this.