OsJoomla Developer - Seller version

Hello I am using the wonderful oj-moomenu on my site and it works great.

I am trying to have a down arrow on the main menu whenever there is an available submenu.

I would like the down arrow to look like the attached screen capture. You can see the menu in action on its temporary, non-live website.
http://brentwoodvillagemarket.com/

You will see in the below snippet that I tried to add the graphic "pmm_south_light.gif" in several places in the css, but none of it works.

Any suggestons?

Thanks!

Code:

#oj-hozmenu { position:relative; float:left; background-image:url(pmm_south_light.gif); } .clr { clear:both; } #oj-moomenu { margin: 0; /* all lists */ padding: 0; float: left; padding-left:2px; font-family:"Times New Roman",Times,serif; color:#FFFFFF; line-height 15px; font-size:14px; background-image:url(pmm_south_light.gif); } #oj-moomenu ul { margin: 0; /* all lists */ padding: 0; background-image:url(pmm_south_light.gif); } #oj-moomenu li { margin: 0; /* all list items */ padding: 0; float: left; display: block; background: none; cursor: pointer; background-image:url(pmm_south_light.gif); } #oj-moomenu li ul { width: 14em; position: absolute; /* second-level lists */ z-index: 99; left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */ height: 37px; width: 14em; background-image:url(pmm_south_light.gif); } #oj-moomenu li ul ul { margin: -2em 0 0 14em; /* third-and-above-level lists */ width: 14em; } #oj-moomenu li li { padding: 0 1em 0 0; margin: 0; width: 14em; } #oj-moomenu ul a { width: 14em; w\idth: 10.8em; } #oj-moomenu li:hover ul ul, #oj-moomenu li:hover ul ul ul, #oj-moomenu li.sfhover ul ul, #oj-moomenu li.havechildsfhover ul ul, #oj-moomenu li.havechild-activesfhover ul ul, #oj-moomenu li.activesfhover ul ul, #oj-moomenu li.sfhover ul ul ul, #oj-moomenu li.havechildsfhover ul ul ul, #oj-moomenu li.havechild-activesfhover ul ul ul, #oj-moomenu li.activesfhover ul ul ul { left: -999em; } /* This "unhides" the sub-menus (left: -999em is what hides them) */ #oj-moomenu li:hover ul, #oj-moomenu li li:hover ul, #oj-moomenu li li li:hover ul, #oj-moomenu li.sfhover ul, #oj-moomenu li.havechildsfhover ul, #oj-moomenu li.havechild-activesfhover ul, #oj-moomenu li.activesfhover ul, #oj-moomenu li li.sfhover ul, #oj-moomenu li li.havesubchildsfhover ul, #oj-moomenu li li.havesubchild-activesfhover ul, #oj-moomenu li li.activesfhover ul, #oj-moomenu li li li.sfhover ul, #oj-moomenu li li li.havesubchildsfhover ul, #oj-moomenu li li li.havesubchild-activesfhover ul, #oj-moomenu li li li.activesfhover ul { left: auto; background-color: #254BBA ; } /* STYLING THE MENU -----------------------------------*/ /* 1st level */ #oj-moomenu li a { display: block; text-decoration: none; line-height: 30px; padding: 0 15px; font-size: 14px; font-weight: normal; color: #fff; text-align: left; } #oj-moomenu li a:hover, #oj-moomenu li a.active, #oj-moomenu li a:focus { } #oj-moomenu li:hover, #oj-moomenu li.sfhover, #oj-moomenu li.havechildsfhover, #oj-moomenu li.havechild-activesfhover { background: #CE0404; } #oj-moomenu li a.active { color: #ffffff; } #oj-moomenu li a.active:hover, #oj-moomenu li a.active:focus { color:#fff; } /* 2nd level and above */ #oj-moomenu li ul { background: none; } #oj-moomenu li ul li { border-right: none; background: none; font-size:14px; line-height:16px; background:#CE0404; } #oj-moomenu li ul a { border-right: none; margin: 0; background: none; color: #FFFFFF; text-transform: none; } #oj-moomenu li.havesubchild, #oj-moomenu li.havesubchild-active { } #oj-moomenu li ul a:hover, #oj-moomenu li ul a:active, #oj-moomenu li ul a:focus, #oj-moomenu ul li:hover, #oj-moomenu ul li.sfhover, #oj-moomenu ul li.havesubchildsfhover, #oj-moomenu ul li.havesubchild-activesfhover, #oj-moomenu ul ul li:hover, #oj-moomenu ul ul li.sfhover, #oj-moomenu ul ul li.havesubchildsfhover, #oj-moomenu ul ul li.havesubchild-activesfhover { color: #ffffff; background-color: #254BBA ; } #oj-moomenu ul li a.active, #oj-moomenu ul li a.active:hover, #oj-moomenu ul li a.active:active, #oj-moomenu ul li a.active:focus { background: none !important; color: #FFFFFF; font-weight: bold; } #oj-moomenu ul ul a:hover { background-color: #254BBA !important; color: #FFF !important; }

Hello
Where is your image "pmm_south_light.gif" link.
Please try this

#oj-moomenu li.havechildsfhover,
#oj-moomenu li.havechild {
background: url (link to your images) center right no-repeat;
}

HI Thanks for helping.

I tried the below code, but it didn't seem to work: I tried the url with and without the quotes around it. The current version has the quote. I used the full url just to make sure the image would sho up.
http://brentwoodvillagemarket.com/

Again it is not the drop down blue menu that I want to have the "down arrow", but the main top menu. Perhaps that is different???

#oj-moomenu li:hover,
#oj-moomenu li.sfhover,
#oj-moomenu li.havechildsfhover,
#oj-moomenu li.havechild-activesfhover {
background: #CE0404;
background: url ("http://brentwoodvillagemarket.com/images/pmm_south_light.gif" center right no-repeat;
}

Full code below


[code#oj-hozmenu {
position:relative;
float:left;
}

.clr {
clear:both;
}
#oj-moomenu {
margin: 0; /* all lists */
padding: 0;
float: left;
padding-left:2px;
font-family:"Times New Roman",Times,serif;
color:#FFFFFF;

font-size:14px;
}

#oj-moomenu ul {
margin: 0; /* all lists */
padding: 0;
}

#oj-moomenu li {
margin: 0; /* all list items */
padding: 0;
float: left;
display: block;
background: none;
cursor: pointer;
}

#oj-moomenu li ul {
width: 14em;
position: absolute; /* second-level lists */
z-index: 99;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
height: 37px;
width: 14em;
}

#oj-moomenu li ul ul {
margin: -2em 0 0 14em; /* third-and-above-level lists */
width: 14em;
}

#oj-moomenu li li {
padding: 0 1em 0 0;
margin: 0;
width: 14em;
}

#oj-moomenu ul a {
width: 14em;
w\idth: 10.8em;
}

#oj-moomenu li:hover ul ul, #oj-moomenu li:hover ul ul ul,
#oj-moomenu li.sfhover ul ul, #oj-moomenu li.havechildsfhover ul ul, #oj-moomenu li.havechild-activesfhover ul ul, #oj-moomenu li.activesfhover ul ul,
#oj-moomenu li.sfhover ul ul ul, #oj-moomenu li.havechildsfhover ul ul ul, #oj-moomenu li.havechild-activesfhover ul ul ul, #oj-moomenu li.activesfhover ul ul ul {
left: -999em;
}

/* This "unhides" the sub-menus (left: -999em is what hides them) */
#oj-moomenu li:hover ul, #oj-moomenu li li:hover ul, #oj-moomenu li li li:hover ul,
#oj-moomenu li.sfhover ul, #oj-moomenu li.havechildsfhover ul, #oj-moomenu li.havechild-activesfhover ul, #oj-moomenu li.activesfhover ul,
#oj-moomenu li li.sfhover ul, #oj-moomenu li li.havesubchildsfhover ul, #oj-moomenu li li.havesubchild-activesfhover ul, #oj-moomenu li li.activesfhover ul,
#oj-moomenu li li li.sfhover ul, #oj-moomenu li li li.havesubchildsfhover ul, #oj-moomenu li li li.havesubchild-activesfhover ul, #oj-moomenu li li li.activesfhover ul {
left: auto;
background-color: #254BBA ;
}

/* STYLING THE MENU
-----------------------------------*/
/* 1st level */
#oj-moomenu li a {
display: block;
text-decoration: none;
line-height: 30px;
padding: 0 15px;
font-size: 14px;
font-weight: normal;
color: #fff;
text-align: left;



}

#oj-moomenu li a:hover,
#oj-moomenu li a.active,
#oj-moomenu li a:focus {

}

#oj-moomenu li:hover,
#oj-moomenu li.sfhover,
#oj-moomenu li.havechildsfhover,
#oj-moomenu li.havechild-activesfhover {
background: #CE0404;
background: url ("http://brentwoodvillagemarket.com/images/pmm_south_light.gif") center right no-repeat;
}


#oj-moomenu li a.active {
color: #ffffff;
}

#oj-moomenu li a.active:hover,
#oj-moomenu li a.active:focus {
color:#fff;
}

/* 2nd level and above */
#oj-moomenu li ul {
background: none;

}

#oj-moomenu li ul li {
border-right: none;
background: none;
font-size:14px;
line-height:11px;
background:#CE0404;
}

#oj-moomenu li ul a {
border-right: none;
margin: 0;
background: none;
color: #FFFFFF;
text-transform: none;
}

#oj-moomenu li.havesubchild,
#oj-moomenu li.havesubchild-active {
}

#oj-moomenu li ul a:hover,
#oj-moomenu li ul a:active,
#oj-moomenu li ul a:focus,
#oj-moomenu ul li:hover,
#oj-moomenu ul li.sfhover,
#oj-moomenu ul li.havesubchildsfhover,
#oj-moomenu ul li.havesubchild-activesfhover,
#oj-moomenu ul ul li:hover,
#oj-moomenu ul ul li.sfhover,
#oj-moomenu ul ul li.havesubchildsfhover,
#oj-moomenu ul ul li.havesubchild-activesfhover {
color: #ffffff;
background-color: #254BBA ;

}

#oj-moomenu ul li a.active,
#oj-moomenu ul li a.active:hover,
#oj-moomenu ul li a.active:active,
#oj-moomenu ul li a.active:focus {
background: none !important;
color: #FFFFFF;
font-weight: bold;
}

#oj-moomenu ul ul a:hover {
background-color: #254BBA !important;
color: #FFF !important;
}
][/code]

Change your code to
background:#CE0404 url(../../../../images/pmm_south_light.gif) center right no-repeat;
}

Hi!

Almost there, however it is adding the down arrow to the red hover area when it is hovered and expanded.

The graphic needs to be added to the top levellmenu so that the visitor will know that there is a submenu below it.
http://brentwoodvillagemarket.com

See attached screen capture of how the arrow should be seen.

We're getting there. I am posting another post in a second about another issue I am having. Perhaps both can be combined in one solution. Stay tuned!



Rowby

Hi

I put your suggested code:

Code:

#oj-moomenu li:hover, #oj-moomenu li.sfhover, #oj-moomenu li.havechildsfhover, #oj-moomenu li.havechild-activesfhover { background:#CE0404 url(../../../../images/pmm_south_light.gif) center right no-repeat; }

But it shows the down arrow during the red hover. It needs to show only in the blue area whenever there is a dropdown available, as in the below example. (Ideally it should not show when the menu turns red.) Is it possible with the css?