restoring sunspot theme hover menu transparency

  • Author
  • #1647034

    Hi I am using the Sunspot theme for my blog and as soon as I change any of the default colors the submenus become opaque, and lose the hover effect.

    Is it possible to restore the partial transparency and effects from the theme in the colors I have chosen?

    The blog I need help with is


    I have managed to restore the hover effects using this code

    .menu a:focus, .menu a:hover, .menu a:active {
        background: rgba(0, 0, 0, 0.4);
    .menu li li a:focus, .menu li li a:hover, .menu li li a:active {
        background: rgba(0, 0, 0, 0.25);

    however the submenu background is still opaque


    @robertlavigne808, I think congratulations are in order as I’m seeing hover color on the menus and submenu items on your site. If you are still having problems, perhaps give us a little more on what you want things to look like.


    As I have I rather extensive sub menu section under the “showroom” tab, I would prefer not to have the submenus completely obstruct the view of the slideshow on the home page.

    I have a french language version of the same site with no upgrades. On this site when I changed the background color to white the background of the menus and submenus stayed the same as in the original theme. see french language version

    Basically I want light green see through sub menus on my english site, or even the original “sunglasses” look the menus had in the theme.


    I have had partial success!

    this is the code am using

    .menu a:focus, .menu a:hover, .menu a:active {
    	background: rgba(0,0,0,0.4);
    .menu li li a:focus, .menu li li a:hover, .menu li li a:active {
    	background: rgba(0,0,0,0.25);
    .menu li ul {
    	background: rgba(140, 163, 65, 0.6)

    The only thing I havent been able to figure out yet is how to make the “focus” and “active” buttons also appear partially transparent, but I can live with what I have so far.


    Try out the following two options and see what you think. The first will make the current submenu item (you are on that page) the darker green (with the translucent black overlay).

    .current-menu-item {
        background: rgba(0, 0, 0, 0.25);

    The following will also set the parent/ancestor pages in the nav with the translucent black.

    .current-menu-item, .current_page_parent, .current_page_ancestor {
        background: rgba(0, 0, 0, 0.25);

    thank you very much I have achieved a look I am happy with and learned a few things at the same time.

The topic ‘restoring sunspot theme hover menu transparency’ is closed to new replies.