Enlarge menu tab

Hi guys,

I'm currently developing a simple website with a menu bar. Now this bar consists of several tabs, and I want to enlarge the tabs as soon as the user puts the mouse cursor over it.
To illustrate this, here is the menu bar in normal mode:
http://advancedata.ad.funpic.de/normal.jpg

And when the user puts the cursor over the tab "Aktuelles", it should look like this:
http://advancedata.ad.funpic.de/enlarged.jpg

My idea was to use the jQuery-function .animate(), but the problem is that I use one background image for each tab and it is not possible to resize background images. I also tried to the <img> tag and change the height-attribute in the animate() function, but this doesn't work either.

Well I have no idea left how I could solve this.

Any help is very welcome.

Thanks in advance,

enne

Hi
You can make with CSS, here's an example of code. Test it to see the result.
<style><!--
#menuv {
position:relative;
padding:2px;
margin-top:100px;
}

/* Properties for horizontal menu */
#menuv li {
float:left;
margin:1px 8px;
border:1px solid blue;
background-color:#daedfe;
padding:1px 2px;
list-style-type:none;
font-weight:600;
text-align:left;
text-decoration:nderline;
}

/* Properties for vertical menu */
#menuv li:hover ul {
display:block;
}
#menuv li ul {
display:none;
position:absolute;
bottom:0;
margin:1px auto 1px -8px;
background-color:#f0f1fe;
border:1px dashed blue;
padding:1px;
}
#menuv li ul li {
position:relative;
clear:both;
width:99%;
margin:1px 0;
border:none;
background-color:#edfeed;
padding:1px;
}

/* Links in sub-menu */
#menuv ul li a {
display:block;
margin:0;
font-weight:normal;
padding:1px;
}
#menuv ul li a:hover {
background-color:#fefefe;
text-decoration:none;
font-style:oblique;
}
--></style>

<ul id="menuv">
<li><a href="/" title="Home">Home</a></li>
<li>CSS Tutorials
<ul>
<li><a href="http://www.coursesweb.net/css/css3-new-background-properties_t Border properties">CSS3 Border properties</a></li>
<li><a href="http://www.coursesweb.net/css/css3-opacity_t opacity">CSS3 opacity</a></li>
</ul>
</li>
<li>HTML Tutorials
<ul>
<li><a href="http://www.coursesweb.net/html/html5-quick-tutorial_t" title="HTML5 Quick Tutorial">HTML5 Quick Tutorial</a></li>
<li><a href="http://www.coursesweb.net/html/html5-canvas_t" title="HTML5 canvas Tutorial">HTML5 canvas Tutorial</a></li>
<li><a href="http://www.coursesweb.net/html/html5-new-tags_t" title="HTML5 New Tags">HTML5 New Tags</a></li>
</ul>
</li>
</ul>

Marplo, thanks for your response. Your css-code works well, nevertheless I would prefer an animation to have a nicer look. Fortunately, I've already found a solution. But I'll use your code as javascript-fallback if a user has javascript disabled.
Thanks for the help ;)