Is there a way to make the sub-menu items have a solid background when
they don't have the focus?
Thanks!
On Dec 22, 5:29 am, slflinders <slflind...@gmail.com> wrote:
> 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.
