I'm currently struggling with the top nav menu in Joomla's Beez3 template. I would like the highlighted menu item not to fill the whole space but just let's say 5px rounded around the text. The rest of the menu item space should be left transparent.
What I've tried is the following in my personal.css file:
#header ul.menu a:hover
{
padding: 5px 5px 5px 5px !important;
margin: 7px 10px 7px 10px !important;
}
This is only part of a bigger CSS definition (both the selectors are many more and the styles are more. I just reduced it to the relevant part.
For some reason, this is not working as expected. The right border of the menu is suddenly gone and the menu is "jumping" slightly when hovering over the first menu item.
I guess it's not all that easy... Can anyone help me here?
Thanks in advance.
