WordPress MENU CSS Help

electricpedals · Member · Jul 17, 2011 at 11:58 pm
Copy link

Add topic to favorites
Re: http://www.electricpedals.com (using DIGG3 Theme)

Hi wonder if someone can help me. We you visit my site, and hover over the top menus the images are swapping fine.

However, as soon as you move down to a sub-menu, the image on the top menu are getting screwed up. Please have a look and let me know if you can understand why.. I’ve given up!

Thanks
Colin

#menu ul li:hover {
background:url(‘http://electricpedals.files.wordpress.com/2011/07/bg_tab_red_right.gif’) no-repeat right top;
}

#menu ul li a:hover {
background:url(‘http://electricpedals.files.wordpress.com/2011/07/bg_tab_red_left.gif’) no-repeat left top;
}

#menu ul li {
color:#000;
}

#menu ul li a {
color:#000;
}

#menu li ul li:hover a {
color:black;
background-color:red;
}

#menu li li {
width:200px;
border-bottom:1px solid #666;
border-left:1px solid #666;
border-right:1px solid #666;
color:black;
}

#menu li li a {
width:180px;
background-color:RGB(184,213,148);
font-size:14px;
color:black;
padding:4px 10px;
}

#menuold li li a {
width:180px;
background-color:black;
font-size:14px;
color:white;
padding:4px 10px;
}

blockquote {
color:black;
font-size:14px;
background:#F0F0F0;
margin:10px 10px 0;
}

#header-overlay img,#syndication,#searchbox {
display:none;
}

#header {
height:195px;
}

.sidebar ul li h2,.obar ul li h2 {
font-size:16px;
font-weight:bold;
line-height:27px;
color:black;
}

.sticky h2 a {
background:white;
color:white;
display:block;
margin:2px 0;
padding:1px;
}

.postinfo a {
color:black;
}

a:hover {
color:red;
background:transparent;
text-decoration:underline;
}

a {
text-decoration:underline;
color:black;
}

.post h2 a {
text-decoration:none;
color:black;
border-bottom:1px solid #000;
}

The blog I need help with is: (visible only to logged in users)
timethief · Member · Jul 18, 2011 at 1:37 am
Copy link
When you alter a theme’s stylesheet, you only need to put in the Editor the modification/additions to the CSS, not the entire thing. Read this for more info:
http://csswiz.wordpress.com/2009/10/15/if-you-have-the-wp-com-css-upgrade/
thesacredpath · Member · Jul 18, 2011 at 2:55 am
Copy link
Here is part of the issue I think. Change the declaration in the following from background color to just “background.” This will keep from pulling the left image into the submenus.
```
#menu li ul li:hover a {
background: none repeat scroll 0 0 red;
color: black;
}
```
The left end disappearing from the top level tab when you go down into the submenu items will take a little more investigation on my part.
thesacredpath · Member · Jul 18, 2011 at 3:01 am
Copy link
And actually, change the above to this instead.
```
#menu ul li li a:hover {
background: none repeat scroll 0 0 red !important;
color: black;
}
```
thesacredpath · Member · Jul 18, 2011 at 3:34 am
Copy link
I’m afraid the other part of it, the left hover image disappearing when you move down into the sub menu items, I’ve not been able to solve. Perhaps one of the staff CSS guru’s will know how to fix it.
electricpedals · Member · Jul 18, 2011 at 8:20 am
Copy link
Dear timethief,

thanks for comments.

Please note that all the CSS items I posted are a subset of the original stylesheet.

Thanks
Colin
electricpedals · Member · Jul 18, 2011 at 8:30 am
Copy link
Dear thesacredpath,

not sure if you remember but you’ve helped me with this website before?

Anyway, you were spot on in stopping the image from the top menu being pulled into the lower submenu, however as you said there is still a problem with the top menu left image disappearing when focus moves to the submenu.

Do you think that I should approach this differently or is there a possible solution?

Looking great though!

Regards
Colin
thesacredpath · Member · Jul 18, 2011 at 8:36 am
Copy link
I’m sure there is a solution. One though was that with the submenu block offset to the right a little that it is somehow cutting off the left image, but I would think it should do that with the original design as well. I searched through all the menu related CSS and could not find where that offset is. I tried a bunch of things. I’m sure it’s something that can be overcome, but it might take one of the staff theme team to figure it out. Digg can be sort of difficult on some things.

Contact staff on Monday after 12pm UTC/GMT when the contact form is again open. And actually that will be just a few hours from now. I would reference this forum thread also.
electricpedals · Member · Jul 18, 2011 at 8:43 am
Copy link
Thanks mate, really appreciated the support.

Colin
electricpedals · Member · Jul 19, 2011 at 2:47 pm
Copy link
any news on a possible fix for this?

I’ve had another play round and changed the formatting a bit but still have the same issue of the top image being pulled away when you move to the submenu?

Anyone else had this problem?

Thanks
Colin

http://www.electricpedals.com
thesacredpath · Member · Jul 19, 2011 at 5:39 pm
Copy link
@maxfixes1, Don’t spam the technical support forums. There is only one post on that blog and it has nothing to do with this issue. Spamming the forums will get you banned and could get your site deleted.

@electricpedals, contact staff directly on this and then if they have a solution, please post back her with the fix for all of us.

No items found.