Hi Lee,
Thanks again for your time on this.
I copied the entire html code including the list of links and css from suckerfish example. And that did work in a text html module, but with some ie spacing issues. The popouts worked.
I changed the #nav reference to #housemenuV, the one that is in the css. That got rid of the JS error message in IE but still no popouts. I then tried replacing the entire housemenu part of my skin css with the one from suckerfish; making sure that #nav was used in the JS code in default.aspx, but still no luck. Also, with this option, you get a bulletted list instead of a menu.
My next guess is that there may be a higher level css, maybe in Portal folder, that is interfering or overiding the skin css file. That or maybe the code in the housemenu css needs to be edited.
I was reading in this tutorial
http://www.htmldog.com/articles/suc...dropdowns/ So now we've got the Suckerfish pumping out new classes, the next step is to simply duplicate the :hover selector with 'sfhover' class selectors:
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
I think I may need to add the sfhover line to the housemenu in the right places for it to trigger the JS. Is this the way you read it?
I looked at my housemenu css which I past below for convenience, that there are already sfhover references. Do more need to be added?
#houseMenuV ul { /* all lists */
margin: 0;
padding: 0;
list-style-type: none;
list-style: none;
float: left;
width: 200;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 11px;
color: #FFFFFF;
background-color: #006699;
}
#houseMenuV li { /* all list items */
margin: 0;
padding: 0px;
text-indent: 15px;
list-style-type: none;
list-style: none;
position: relative;
float: left;
width: 200;
/* hack for MacIE5 to ignore, while other browsers use \*/
width: 200px;
_width: 100%; /* width recognized by IE only to handle box model issues */
/* end hack */
line-height : 18px;
}
#houseMenuV li ul { /* second-level lists */
position: absolute;
left: -9999px;
margin-left: 200px;
_margin-left: 200px;
margin-top: -21px;
border: solid 1px #999;
z-index: 999;
}
#houseMenuV li ul ul { /* third-and-above-level lists */
left: -9999px;
z-index: 999;
}
#houseMenuV a {
display: block;
width: 200px;
/* hack for MacIE5 to ignore, while other browsers use \*/
width: 200px;
_width: 100%; /* width recognized by IE only to handle box model issues */
/* end hack */
color: #FFFFFF;
border-bottom: solid 1px #ffcc33;
border-right: solid 1px #ffcc33;
font-weight: bold;
font-color: #FFFFFF;
text-decoration: none;
background-color: #6699;
padding: 0px 0px 0px 0px;
opacity: 1;
filter: progid
XImageTransform.Microsoft.Alpha(Opacity=100);
}
#houseMenuV li a:hover {
color: #595050;
background-color: #ffcc00;
}
#houseMenuV li:hover ul ul,
#houseMenuV li:hover ul ul ul,
#houseMenuV li.sfhover ul ul,
#houseMenuV li.sfhover ul ul ul {
left: -9999px;
}
#houseMenuV li:hover ul,
#houseMenuV li li:hover ul,
#houseMenuV li li li:hover ul,
#houseMenuV li.sfhover ul,
#houseMenuV li li.sfhover ul,
#houseMenuV li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
z-index: 999;
}
#houseMenuV iframe {
position: absolute;
left: 0;
top: 0;
z-index: 0;
filter: progid
XImageTransform.Microsoft.Alpha(style=0,opacity=0);
display: block;
}
/* Applied to the parent item, if displayed, in either vertical or horizontal
orientation. Must follow other styles. */
#houseMenuParentItem a
{ /* all links under the parent item (li) */
color: ##ffcc33;
background-color: #339933;
text-decoration: none
}
a#houseMenuParentLink
{ /* parent link itself */
color: #ffffff;
background-color: #339933;
text-decoration: none;
text-indent: 5px;
}
a#houseMenuCurrentLink
{ /* current link itself */
color: #ffffff;
background-color: #339933;
text-decoration: none;
}
Thanks again,
Dan