Can you tell me how to make a resizing horizontal menu CSS?

I am new to web design and can't get it to work. When I mean resizing, I mean a menu that will keep the 100% width without increasing too much in hight as I zoom in. Its hard for me to explain, but check how I did it on my website.

My Site

You will see the menu and 2 pictures. Notice that when you zoom in or out, the wide picture keeps it's size, always displaying at 100% of the width. The second picture gets smaller and bigger as you zoom in and out, but if you zoom in too much it starts resizing to 100% so I dont get a horizontal scroll bar.

The horizontal menu behaves like the second picture, getting bigger and smaller, and that's not exactly what I want. Sorry if I am writing too much, but dont quite know how to explain.

Anyway, here is the code for the wide pic:

html: <div class="container"><img src="head.jpg" /></div><br/>

CSS:

.container {width: 100%; overflow: hidden; }

.container img { width: 100%;}
This is enough to make the picture behave as I want. I should say that when it comes to the horizontal menu, I made a short one in the left side and then put it in a div that streches 100% since I didn't know how to make the menu strech while keeping the tabs on the left.

here is all the code for the menu (its not much):

HTML:

 <div id="menu">
 
<ul>
 
<li><a href="#">Home</a></li>
 
<li><a href="#">News</a></li>
 
<li><a href="#">Reviews</a></li>
 
<li><a href="#">Videos</a></li>
 
</ul>
 
</div>

CSS:

* {margin: 0; padding: 0;}
 
ul { display: table; }
 
ul li { float: left; list-style-type: none; }
 
ul li a { background: #444444; color: white; display: block; font-family: Arial, Helvetica, sans-serif; padding: 10px 20px; text-decoration: none; }
 
ul li a:hover { background: red; }
 
#menu { width: 100%; height: auto; background-color: #444444; }