Hi Admin

I've added a margin to my sub menu so that it has a space between the main menu, but I also added an arrow for the mouse over part, if you have a look at my sub menu, it's doing something weird and I don't know how to fix it. Can you help me please?

Heres my link boerenooi.za.net/


This is the styling I have so far

DIV#{$id}.yui-skin-sam DIV.bd DIV.bd,
DIV#{$id}.yui-skin-sam DIV.bd DIV.bd LI
{
background: url(www.boerenooi.za.net/modules/mod_ariyuimenu/mod_ariyuimenu/js/assets/menu/sam/subbg.png);
color: #fff;
margin-left: 30px;
text-align: left;
}

DIV#{$id}.yui-skin-sam DIV.bd DIV.bd LI.yuimenuitem-selected
{
background-image: url(www.boerenooi.za.net/modules/mod_ariyuimenu/mod_ariyuimenu/js/assets/menu/sam/arrow.png);
background-position: left center;
background-repeat: no-repeat;
color: #fff;
}
body DIV#{$id}.yui-skin-sam DIV.bd DIV.bd a.yuimenuitemlabel
{
color: #FFF;
}

Provide screenshot where we can see how the menu should look.

Regards,
ARI Soft

Thanks Admin, this is what it should look like.

Remove "margin-left: 30px" CSS property from custom CSS rules and add the next CSS rule:



Regards,
ARI Soft

That didn't make a difference, it just went back to sitting next to the main menu. I also noticed that the arrow doesn't show in IE8

You defined "padding-left" for two elements:

DIV#{$id}.yui-skin-sam DIV.bd DIV.bd,
DIV#{$id}.yui-skin-sam DIV.bd DIV.bd LI

but in our previous post we specified only one element:

div#{$id}.yui-skin-sam div.bd div.bd li

In any case, we can recommend to use FireBug addon for FireFox browser that investigate HTML elements styles. In IE 8 you can press F12 and use "Developer Tools". Information about menu CSS classed can be found here.

Regards,
ARI Soft