navigation menu last item appearing and dissapearing on resizing - html

Question

I have the below nav menu and whenever i resize using the ctrl+right click the last item FAQ appears and dissapears..not to mention it also breaks my entire site background represented by 2 images.
whats wrong and how to make it stay the same on resizing? cheers!
html:
<div class="nav">
<ul>
<li class='active '><a href='#'><span>Home</span></a></li>
<li><a href='#'><span>about us</span></a></li>
<li><a href='#'><span>our errand ladies</span></a></li>
<li><a href='#'><span>schedule an errand</span></a></li>
<li><a href='#'><span>contact us</span></a></li>
<li><a href='#'><span>faq</span></a></li>
</ul>
</div>
css:
.nav {
width: 100%;
height: 63px;
overflow: hidden;
}
.nav ul {
margin: 0;
padding: 0;
list-style-type: none;
width: auto;
position: relative;
display: block;
height: 63px;
text-transform: uppercase;
font-size: 21px;
background: transparent url('images/nav-bg-repeat.png') repeat-x top left;
font-family: Helvetica,Arial,Verdana,sans-serif;
}
.nav li {
display: block;
float: left;
margin: 0;
padding: 0;
}
.nav li a {
display: block;
float: left;
text-decoration: none;
padding:0 30px;
height: 63px;
line-height: 63px;
vertical-align: middle;
background: transparent url('images/divider.png') no-repeat top right;
}
.nav li a:hover {
background: transparent url('images/nav-hover.png') repeat-x top right;
}
.nav li a span {
color: #000;
font-weight: bold;
}

Answer 1

You have overflow: hidden; set on your .nav element and no width defined.
By default, the .nav is set to 100% width, as it's a block element. It will automatically span the width of the parent it's currently sitting in.
When you resize the window down to a size that cannot fit the links, they fall outside of the .nav and are hidden from view.
You can set a fixed width to your .nav (or parent container) to prevent it from collapsing in width.
.nav {
width: 960px;
}
Or if you still want it to collapse, but still show the nav links, you can remove overflow: hidden; and the elements will appear (however, they will not be inline with each other.

Answer 2

for the second problem set the
body{
background-repeat:no-repeat;
}
and it disappears as overflow is hidden; set it to none
.nav{
width:1000px;
overflow:none;
..
}
the way i see is you are trying to put the list elements inline so you can try this code and modify the looks:
<ul id="navlist">
<li id="active">Home</li>
<li>Here</li>
<li>There</li>
<li>Faq</li>
<li>Contact</li>
</ul>
</div>
#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}