Resizing Menu Bar

Hi,

How and is it to create the following menu bar, using only the ul and li tags?
I need this to resize upon the text being resized, and be cross-browser compatible.

Any help appreciated!

 

I'm Still Stuck!

 

not sure if this is the kinda thing you wanted but..

I also might have it wrong as i'm doing this off the top of my head without checking it, if it's wrong I will be able to help you further later on.

Assuming you are using an external stylesheet and have linked it from your html already.

html
<ul>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
</ul>


css

ul {
list-style:none;
padding:0px; margin: 0px;
}

ul li {
float:left;
padding:0px;
margin:0px;
}

ul li a {
display:block;
padding:5px 20px;
color:#000;
}

 

You could also put a border around each li element

e.g.
<style>
ul{
list-style-type: none;
}
li{
border: 1px solid #000;
margin: 0;
padding: 0;
display: inline;
}
</style>


<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>

 

I'm trying to create the navigation bar, as shown in the attached image. How do you make the UL and LI tags enlarge, upon the default browser text size being increased?

 

When the text enlarges ... so should the tags.

 

Valiant is right, when you zoom in or just make the text larger, the whole thing will enlarge.
If you'd tried this then you would know this already?