Hovering over menu items

Thank you @ Jan Dembowski..

@josh (Ult. Tinymce):
Thanks for your ideas. Now I know better what I need. I am trying to explain:

1) The hovering background color should be white. Like the background of the inverted menu image.

2) How can I reduce the background color of menu names like “Team” etc. Shall the image be wider in the “hovering mode” when in choose TRANSPARENT in the following code?

#access ul li:hover {
    background: url("https://apotheke-sauter.de/wp-content/uploads/2013/04/logo_sauter-s.jpg") no-repeat scroll 0.5em 0.5em transparent;
}

It looks like you are getting closer.

Where are you stuck at?

Yes, I am getting closer.

That’s where I am stuck:
The background color field of the menu names like “Team” etc. should be less wide in the “hovering mode”. By this my custom image “S” will be visible like in the non-hovering situation.

Ideas??

https://goo.gl/03sHi

You’re going to need to make each menu item a little wider… there isn’t enough room for everything.

In your child theme stylesheet, on line #114, change this:

#access a {
    margin-left: 20px;
}

To this:

#access a {
    margin-left: 30px;
}

Great, this worked perfectly!! Thanks a lot!

The last thing I am thinking about is on this site:
https://apotheke-sauter.de/bestellformular/

I would like to remove the little image “S”. It looks a little awkward. Where do I start to make changes?

Thanks, Anna

Which little image are you referring to?

The letter “S” (image) in front of each menu item.

Sorry, my last post were a little confusing. I was thinking about removing the little images in front of each SUB menu item. Only on the two sub sites of my website below (called: “Bestellformular”). It looks a little awkward. Where do I start to make changes?

Thanks, Anna

https://apotheke-sauter.de/bestellformular/

Okay, on the child theme of that site, on line #104… change this:

#access ul li {
    background: url("https://apotheke-sauter.de/wp-content/uploads/2013/04/logo_sauter-s.jpg") no-repeat scroll 0.5em 0.5em transparent;
}

To this:

#access ul li {
    background: none;
}

EDIT: And then for the hover, on line #109.. change this:

#access ul li:hover, #access ul li:focus {
    background: url("https://apotheke-sauter.de/wp-content/uploads/2013/04/logo_sauter-s_inv.jpg") no-repeat scroll 0.5em 0.5em #FFFFFF;
}

To this:

#access ul li:hover, #access ul li:focus {
    background: none;
}

@josh (Ult. Tinymce):

I think I was editing my post above while you where answering. My last posts were a little confusing.

I was thinking about removing the little images in front of each SUB menu item. Only on the two sub sites of my website below (called: “Bestellformular”). It looks a little awkward. Where do I start to make changes?

Thanks, Anna

https://apotheke-sauter.de/bestellformular/

@josh (Ult. Tinymce):
Is your code above only removing the “S”-image of the sub menu items?