I have yet another questions about the menu. My site is pretty much like I want it, layout-wise, but one thing about the menu has me stumped.
Check this out: http://picz.pxlwrshp.be/lalala.png
Hovering over 1st lvl items makes text red, background-color is transparent. Hovering on 2nd level is #fc0, text red.
Problem: when moving mouse from 1st lvl items, the background turns #fafafa, like in default.css, even though I’ve overridden it with background: transparent in my own stylesheet. Also happens when clicking 2nd lvl items.
Changing the #fafafa to transparent in default.css makes the drop-downs transparent.
Windows 7, latest (as of November 6th, 2011) versions of Chrome and Firefox.
Relevant(?) part of style.css follows:
.sf-menu li {
background: transparent;
}
.sf-menu li li {
background: transparent;
}
.sf-menu li li li {
background: #9AAEDB;
}
.sf-menu li:hover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
background: transparent;/*url(img/menu-bg.png) top left repeat-x;*/
outline: 0;
border-bottom-color:#ccc;
color:#ec1d24;
text-shadow: 0px 1px 1px #000;
filter: dropshadow(color=#000000, offx=0, offy=1);
}
.sf-menu li.sfHover li a:hover {background: #fc0;}
.sf-menu ul {
border-right:0px solid #ccc;
border-bottom:0px solid #ccc;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
top:48px; /* overriding essential styles */
}
.sf-menu ul ul {
margin-top:0;
}
.sf-menu ul a {
background:#858585;
border-bottom:none;
}
.sf-menu ul a:hover {
color: #FF4B33;
}
I know I probably have a couple of redundant things in there, but I haven't attempted cleaning my code yet.
Thankful for any help.
