I’ve been using PureCSSMenus on a series of article pages on zodiac signs. I’m also using them on the index page for these and other articles. The menus are simple, one item and several sub-items.
On the index page, they function beautifully. However, on the zodiac article pages, for some reason I’m getting a red(ish) dashed border around each sub-item. I cannot for the life of me figure out where it’s getting them from.
I have a global link style that turns red with a dashed red line when the link is hovered over, and I thought that’s where it must be coming from. But when I tested it by changing the colour and border-bottom style of the hovered links, the CSS menu problem remains unchanged (still has the red dashed outline around each sub-item). It happens in Firefox, Chrome and IE, and only on the zodiac article pages (not on the index page). So it has to be coming from something in those pages somehow.
Since this only shows up when I hover over the top item or the sub-items, Firebug is of limited help. Firebug does show the styles when I mouseover an item, but I can’t see where it’s coming from in the styles that are listed in the window.
I even went back to PureCSSMenu and got some fresh code, but the problem is still there. (Here’s a sample page that uses the new code.)
I’m hoping that someone here can help me figure out where it’s getting this dashed red border from, so that I can get it out of there. (Yes, I know the rest of the coding is a mess. 
Some day I’ll do a spring cleaning of the site, but for now I must deal with only the problems.)
I would post the code or CSS but since it could be coming from a few different style sheets, I didn’t think it would make sense to dump a manuscript worth of code here. If posting any of the code or if further explanation will help, let me know and I’ll do what I can.
Many thanks in advance for any help with this!
Could you clarify where the issue is? I don’t see any sub-items anywhere, so am not sure what you are referring to. Have you checked what browser this is happening in?
Hi Ralph.m,
Just mouseover where it says “Item #1” (on the sample page). The sub-items will drop down.
Oh sorry! It’s in the right column, about the second screenful down.
OK, in your mainstyles.css folder at line 424 or thereabouts, remove this line in red:
ul ul {
[COLOR="#FF0000"]background: url("../images/edarrowred.gif") no-repeat left top;[/COLOR]
padding-left: 20px;
margin-bottom: 2px;
list-style-type: none;
}
The object causing the funny red marks is a misapplied background image.
mainstyles.css (line 424)
ul ul {
background: url("../images/edarrowred.gif") no-repeat left top; [color=red]/* this is the image */[/color]
padding-left: 20px;
margin-bottom: 2px;
list-style-type: none;
/* font-family: tahoma,arial,helvetica,sans-serif; */
/* font-size: 10pt; */
}
It is being applied to the background of every unordered list. (It is probably supposed to be a list item marker.)
Hope this helps.
Off Topic:
Checked just before posting and STILL got pipped! 
Thanks very much for your help and suggestions, ralph.m and ronpat. However, it doesn’t change the border around the dropdown menu list on those pages. 
Yes, the use of a background image was deliberate because I found that just using the image as a list-style-image was shifting it up; the background-image makes it line up better. I might have gotten this idea through A List Apart or some other great site.
In any case, it wouldn’t make sense that this was the source of the problem, since the image is specified as no-repeat. It also wouldn’t explain why the dropdown lists are fine on that one index page, but not on the zodiac sign article pages, even when I use exactly the same include-file for the article pages as is included on the index page. (I’ve done this now on the sample page.)
Other ideas?
The offending code is still there. Does your server do some kind of caching or something? Mainstyles.css line 424, still calling that red arrow image.
In any case, it wouldn’t make sense that this was the source of the problem, since the image is specified as no-repeat.
Ah, but you override that no-repeat with
ul.pureCssMenu ul {background-repeat: repeat;} on line 39.
The image certainly goes away when, in my browser debugger, I uncheck the line 242 statement.
Oh thank you!! And thank you also to Stomme poes for your reply. I didn’t think about it picking up the image from the second tier of lists. I seem to be stuck using a different mainstyles just for those article pages, since I can’t find a way to override the background image without messing up the dropdown list styles. However, IT WORKS! Thank you very much! 
