I've been trying to customise the navigation menu colour scheme but I'm having a little difficulty. The menu option "Level 1" unfolds, "Level 2" is displayed properly, though "Level 3" does not. The text on this is not visible until it is highlighted. This is under Safari 4. In Firefox the menu does not even unfold until the mouse is moved to the area the where the "Level 2" and "Level 3" text should be. If anyone knows what's going on I'd be grateful for a explanation. My grasp of CSS is tenuous at best, so much of the code posted may be irrelevant to my question, and relevant code may be missing. I should also note that I'm working from the default.css and single column layout css of Thematic.
/* =Menu
-------------------------------------------------------------- */
.skip-link {
display:none;
}
#access {
border-bottom:0px solid #ccc; /*edit */
height:32px;
font-size:13px;
overflow:visible;
z-index:100;
}
/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
margin: 0;
padding: 0;
list-style: none;
}
.sf-menu {
line-height: 1.0;
}
.sf-menu ul {
position: absolute;
top: -999em;
width: 10em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
width: 100%;
}
.sf-menu li:hover {
visibility: inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
float: left;
position: relative;
}
.sf-menu a {
display: block;
position: relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
left: 0;
top: 2.5em; /* match top ul list item height */
z-index: 99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
left: 10em; /* match ul width */
top: 0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
left: 10em; /* match ul width */
top: 0;
}
/*** THEMATIC SKIN ***/
.sf-menu {
border-right:0px solid #ccc;
float:left;
}
.sf-menu a {
border-left:0px solid #ccc;
border-top:0px solid #ccc;
border-bottom:0px solid #ccc;
padding:9px 13px;
text-decoration:none;
}
.sf-menu .current_page_item a,
.sf-menu .current_page_ancestor a,
.sf-menu .current_page_parent a {
border-bottom-color:#fff;
}
.sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
color:#fff;
background-color:#000066; /* lots of edits here... almost the full bracket. */
opacity:0.5;
filter:alpha(opacity=50);
-moz-opacity:0.5;
}
.sf-menu li {
background: #fff; /* default menu item colour */
opacity:1;
filter:alpha(opacity=100);
-moz-opacity:1;
}
.sf-menu li li {
background: #fff; /* level 2 */
opacity:1;
filter:alpha(opacity=100);
-moz-opacity:1;
}
.sf-menu li li li {
background: #000066; /* level 3 default colour */
opacity:1.0;
filter:alpha(opacity=100);
-moz-opacity:1.0;
}
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active { /* All menu items rollover properties */
background: #000066;
outline: 0;
border-bottom-color:#fff;
opacity:1;
filter:alpha(opacity=100);
-moz-opacity:1;
}
.sf-menu ul {
border-right:0px solid #fff;
border-bottom:0px solid #fff;
opacity:1;
filter:alpha(opacity=100);
-moz-opacity:1;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
top:32px; /* overriding essential styles */
}
.sf-menu ul ul {
margin-top:0;
}
.sf-menu ul a {
color: #fff;
background:#fff;
border-bottom:none;
}
.sf-menu ul a:hover {
color: #fff;
}