Question

I have a menu and a small bar that follows which <a> tag I hover in my menu.

The small bar is an image and I am animating its CSS with the jQuery animate function.

My problem is that my small bar position is a little bit different when I use a different
browser or a different resolution.

I need that bar to always fit perfectly.

The problem with my fiddle is that I use an image

Answer 1

You don’t have to repeat yourself for each item, instead you can write a single function for all of them:

$("#smallMenu a").mouseover(function(){
    var $this = $(this),
        os = $this.offset();
    $("#smallBar").clearQueue().animate({
        left: os.left,
        top: os.top + $this.height(),
        width: $this.width()
    });
});

Fiddle

This will set the bar in the same left position of the hovered link – os.left – and just below the hovered link itself – os.top + $this.height() -, with the same width of the link – $this.width(), independently of its position or size in the page. You can adapt it your needs (you can add or take pixels of the positions and width as well).