This is doing my head in. I’ve been working on this for two days now, and have tried countless different style tutorials and solutions, but I simply cannot get the second level of my Wayfinder generated menu to display on hover. I’m not bad at CSS or HTML but this one has me completely confounded and I could really use some help! Whoever helps me to make this problem go away will be my hero
Here’s how things stand at the moment:
This is the site under development:
http://www.orionvisuals.com/wip/harryjenkins
This is my Wayfinder call, as described at MuddyDogPaws:
http://www.muddydogpaws.com/development/wayfinder/examples/example-2.html
[[Wayfinder? &startId=`0` &level=`3` &parentClass=`hide` &parentRowTpl=`cssplay_parentRow` &outerTpl=`cssplay_outer` &innerTpl=`cssplay_inner` &rowTpl=`cssplay_row` &outerClass=`menu` &cssTpl=`cssplay_basicdd`]
I’ve actually got an alternative style sheet for the site in IE loading, so I’ve put the code there. The stuff I’ve used for firefox has worked beautifully with the menu from day one. Here’s the latest css I’m using, taken from CSSPlay:
http://www.cssplay.co.uk/menus/basic_dd.html
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/basic_dd.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any
way to fit your requirements.
=================================================================== */
/* remove the bullets, padding and margins from the lists */
.menu ul{
list-style-type:none;
padding:0;
margin:0;
}
/* make the top level links horizontal and position relative so that we can position the sub level */
.menu li{
float:left;
position:relative;
z-index:100;
}
/* use the table to position the dropdown list */
.menu table{
position:absolute;
border-collapse:collapse;
z-index:80;
left:-1px;
top:25px;
}
/* style all the links */
.menu a, .menu :visited {
display:block;
font-size:13px;
width:83px;
padding:0;
color:#000;
background:none;
text-decoration:none;
margin-right:1px;
text-align:center;
}
/* style the links hover */
.menu :hover{
color:green;
}
/* hide the sub level links */
.menu ul ul {
visibility:hidden;
position:absolute;
width:200px;
height:0;
}
/* make the sub level visible on hover list or link */
.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible;
}
This is the "general" style sheet:
http://www.orionvisuals.com/wip/harryjenkins/assets/css/hjmain.css
This is the "ie6" style sheet:
http://www.orionvisuals.com/wip/harryjenkins/assets/css/hjie.css
The sooner I can get this solved, the sooner I can get rid of this headache I have from banging my head on the desk. :’( If any more information would help with the problem solving process, please let me know and I’ll provide it. Incidentally, the font scaling isn’t working properly yet either, but that’s another issue I’ve asked about in another thread.
THANK YOU so much in advance to anyone able to help!
