I'm banging my head against this and starting to get completely unable to help myself.
I need to simplify the drop down menu
http://www.flagheritagefoundation.org/web/
so that the sub-menu is in line with the rest of the menus. Basically just a simple styled list with the top levels across horizontally.
I'll bullet and indent each sub-topic rather than have them fly out to the right. Only the top level will be relative block. I just can't see the forest and the trees keep growing and I'm all tangled up! I had it and lost it and now can't get it back. I turned of super fish and that didn't help so I put it back.
What do I need to get rid of? Add sub-menu?
/*** 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;
}
Thanks for any direction or help!
kef
