Thank you. This gets me very close to what I want. The only problem
now is that when I hover over the top level menu item, the sub-menu
items appear and have a transparent background as well. As soon as I
move focus to a sub-menu item, it takes on the solid background color
I want. Is there a way to make the sub-menu items have the solid
background when they don't have the focus?
On Dec 21, 10:43 pm, Dasher <sea...@gocreate.com.au> wrote:
> OK - remove that last bit re:
>
> .sf-menu li { background: transparent; } /*top level*/
> .sf-menu li li { background: #F0F; } /*second level*/
> .sf-menu li li li { background: #000; } /*third level*/
>
> I think given the spans and extra classes you have added you'll need
> to do this...
>
> Change in your superfish.css file to this:
>
> .sf-menu li:hover, .sf-menu li.sfHover,
> .sf-menu li a:focus, .sf-menu li a:hover, .sf-menu li a:active
> {
> background: transparent;
> outline: 0;
>
> }
>
> .sf-menu li li:hover, .sf-menu li li.sfHover,
> .sf-menu li li a:focus, .sf-menu li li a:hover, .sf-menu li li
> a:active
> {
> background: #AABDE6;
> outline: 0;
>
> }
>
> .sf-menu li li li:hover, .sf-menu li li li.sfHover,
> .sf-menu li li li a:focus, .sf-menu li li li a:hover, .sf-menu li li
> li a:active
> {
> background: #9AAEDB;
> outline: 0;
>
> }
>
> I think that will pretty well get you over the line.
>
> If not, direct message me and I can work out the rest for you at a
> fee.
>
> Good luck.
>
> On Dec 22, 12:53 pm, slflinders <slflind...@gmail.com> wrote:
>
> > I'm still looking for help on this issue. Any other suggestions?
>
> > On Dec 21, 6:56 am, slflinders <slflind...@gmail.com> wrote:
>
> > > Yes, that's exactly what I want to accomplish. I tried your suggestion
> > > below, but it doesn't work.
>
> > > When I remove the background color definition from the '.sf-menu a'
> > > item, all menu items have a transparent background. No matter what
> > > colors I specify in the '.sf-menu li' items, they don't have any
> > > effect--even changing the top-level 'li' item from transparent to
> > > another color doesn't have any effect.
>
> > > I'm trying to get the 404 error fixed, but it only affects the main
> > > landing page. You can see the site by going to theratrike.com/
> > > home.html instead.
>
> > > Thanks for your help.
>
> > > On Dec 20, 10:05 pm, Dasher <sea...@gocreate.com.au> wrote:
>
> > > > Howdy,
>
> > > > I think I know what you'e after.
>
> > > > + Transparent background on top level links
> > > > + Solid background on sub links
>
> > > > The link you referred to returns a 404 page so I could not see it in
> > > > action.
>
> > > > I would do it by removing the background colour from the 'a' item and
> > > > adding it to the 'li' item instead.
>
> > > > Eg
>
> > > > .sf-menu a {
> > > > border-left: 1px solid #fff;
> > > > border-top: 1px solid #fff;
> > > > padding: .1em .1em;
> > > > text-decoration:none;
>
> > > > }
>
> > > > .sf-menu li { background: transparent; } /*top level*/
> > > > .sf-menu li li { background: #F0F; } /*second level*/
> > > > .sf-menu li li li { background: #000; } /*third level*/
>
> > > > And then just change the colours to suit.
>
> > > > Hope that helps.
>
> > > > Cheers.
>
> > > > Nick
>
> > > > On Dec 20, 3:39 am, slflinders <slflind...@gmail.com> wrote:
>
> > > > > I'm using a Superfish menu for the top menu at the following site:
>
> > > > >http://theratrike.com
>
> > > > > The first-level menu has an image behind it and the default background
> > > > > color for the list items was transparent, which made it look nice.
> > > > > However, when you hovered over a first-level item to expose the sub-
> > > > > menu, the background for the sub-menu items was also transparent.
> > > > > Since the sub-menu drops down, the other elements of the page show
> > > > > through the sub-menu items and make them hard to read.
>
> > > > > So, I added a background color to the .sf-menu as follows:
>
> > > > > .sf-menu a {
> > > > > border-left: 1px solid #fff;
> > > > > border-top: 1px solid #fff;
> > > > > padding: .1em .1em;
> > > > > background: #f5f5f5;
> > > > > text-decoration:none;
>
> > > > > }
>
> > > > > That solves the problem for the sub-menu items, but now the background
> > > > > color is also covering the image behind the first-level menu items. Is
> > > > > it possible to have the first-level items with a transparent
> > > > > background and the sub-menu items with a solid background? If so, how
> > > > > do I accomplish that?
>
> > > > > Thanks.
