MyBB Community Forums

Hello

I made a minor change in my menu (theme MyClean): I replaced the underlined text effect when the mouse hovers on it, by a window with a different tone.

This is the original code:

div#cabecera ul#menu li a:hover,
div#cabecera ul#menu li a:active {
	text-decoration: underline;

and was replaced by this:

div#cabecera ul#menu li a:hover {
     background: #00548d url(images/mycleanorange/tcat_bg_hover.png) repeat-x;
     padding: 7px 5px;
 }

I have the desired effect, but I have a little problem with this. Now when the mouse hovers some menu, that menu and all of them beside the right, are displaced to the right:


The same effect applies to the far right menu 'Close session', but this menu displaces to the left.

Could someone please help me with this? What do I have to change?

Thanks in advance

Simply keep the same padding in the default display of the menu item, including also :
padding: 7px 5px;

Well, I'm not quite sure what you're talking about, but this is what I have.

Whole menu item code:

div#cabecera ul#menu {
	background: #d46400 url(images/mycleanorange/tcat_bg.png) repeat-x;
              width: 1070px;
	list-style: none;
	margin: 0;
	padding-left: 20px;
}

div#cabecera ul#menu li {
	display: inline-block;
	margin: 6px 20px 6px 0;
}

div#cabecera ul#menu li a:link,
div#cabecera ul#menu li a:visited {
	color: #fff;
	text-decoration: none;
}

div#cabecera ul#menu li a:hover {
     background: #00548d url(images/mycleanorange/tcat_bg_hover.png) repeat-x;
     padding: 7px 5px;
 }

So, I'm trying to make this changes:

Adding padding to the above code.

div#cabecera ul#menu li a:link,
div#cabecera ul#menu li a:visited {
	color: #fff;
	text-decoration: none;
           padding: 7px 5px;
}

div#cabecera ul#menu li a:hover {
     background: #00548d url(images/mycleanorange/tcat_bg_hover.png) repeat-x;
     padding: 7px 5px;
 }

or copying the padding from the upper code.

div#cabecera ul#menu {
	background: #d46400 url(images/mycleanorange/tcat_bg.png) repeat-x;
              width: 1070px;
	list-style: none;
	margin: 0;
	padding-left: 20px;
}

div#cabecera ul#menu li {
	display: inline-block;
	margin: 6px 20px 6px 0;
}

div#cabecera ul#menu li a:link,
div#cabecera ul#menu li a:visited {
	color: #fff;
	text-decoration: none;
}

div#cabecera ul#menu li a:hover {
     background: #00548d url(images/mycleanorange/tcat_bg_hover.png) repeat-x;
     padding-left: 20px;
     padding: 7px 5px;
 }

Any of both attempts did not made any change to the menu

Try this :

div#cabecera ul#menu {
    background: #d46400 url(images/mycleanorange/tcat_bg.png) repeat-x;
              width: 1070px;
    list-style: none;
    margin: 0;
    padding-left: 20px;
}

div#cabecera ul#menu li {
    display: inline-block;
    margin: 6px 20px 6px 0;
}

div#cabecera ul#menu li a {
     padding: 7px 5px;
}
div#cabecera ul#menu li a:link,
div#cabecera ul#menu li a:visited {
    color: #fff;
    text-decoration: none;
}

div#cabecera ul#menu li a:hover {
     background: #00548d url(images/mycleanorange/tcat_bg_hover.png) repeat-x;
}

Thanks a lot Exdiogene, that solved the problem