This might help or not...
I did a test install of Revo and got this very stripped dropdown menu to function. I purposely made the CSS very simple as its better to start simple and then get more fancy once its working.
This went into my design template:
<div id="banner">
[[!Wayfinder? &startId=`0` &outerTpl=`mainNavOuter` &rowTpl=`mainNavRow` &innerTpl=`mainNavInner` &innerRowTpl=`mainNavInnerRow` &hereClass=`current_page_item` &firstClass=`` &lastClass =`` ]]
</div><!--banner ends-->
My menu chunks:
mainNavOuter:
<div id="mainNavBox">
<ul class="mainNav">[[+wf.wrapper]]</ul>
</div>
mainNavRow:
<li [[+wf.classes]]><a href="[[+wf.link]]" title="[[+wf.title]]" [[+wf.attributes]]><span>[[+wf.linktext]]</span></a>[[+wf.wrapper]]</li>
mainNavInner:
<ul>[[+wf.wrapper]]</ul>
mainNavInnerRow:
<li [[+wf.classes]]><a href="[[+wf.link]]" title="[[+wf.title]]" [[+wf.attributes]]><span>[[+wf.linktext]]</span></a>[[+wf.wrapper]]</li>
This menu CSS went into my main CSS file that I linked in the <head code>:
#mainNavBox{
border: 1px solid red;
height:30px;
margin:0 0 50px 0;}
.mainNav {
margin: 0;
padding: 0;
height: 1em; }
.mainNav li {
list-style: none;
float: left; }
.mainNav li a {
display: block;
padding: 3px 8px;
background-color: blue;
color: #fff;
text-decoration: none; }
.mainNav li ul {
display: none;
width: 10em;
background-color: #69f;}
.mainNav li:hover ul, .mainNav li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
.mainNav li:hover li, .mainNav li.hover li {
float: none; }
.mainNav li:hover li a, .mainNavli.hover li a {
background-color: #69f;
border-bottom: 1px solid #fff;
color: #000; }
.mainNav li li a:hover {
background-color: #8db3ff; }
.current_page_item {
font-weight:bold;}
.mainNav li:hover ul li ul,
.mainNav li a:hover ul li a ul {
visibility:hidden;
position:absolute;
height:0;
width:0;}
.mainNav li:hover ul li a,
.mainNav li a:hover ul li a {
display:block;
background-color: #69f;
border-bottom: 1px solid #fff;
color: #000;}
.mainNav li:hover ul li:hover ul,
.mainNav li a:hover ul li a:hover ul {
visibility:visible;
position:absolute;
left:100%;
top:30px;
width:170%;}
I then created a bunch of published resources: some were single pages, some were container resources with child pages and some of the child pages had their own child pages (grandchildren from the top row).
This is not an attractive menu at all. But it all works. Its presented as a horizontal menu using floats. CSS is doing most of the work. I can then go in and add stylish colors or background images to the resting states, active states and hover states etc.
I did not use any download like one of Stu’s great menus. Instead I got the basic row templates working and then made note of the divs, classes and CSS cascade that were generated in the markup. From there I built each part of CSS. The parent rows are easy. The child rows are more tricky but pay attention to the CSS cascade laws and all is good.
This is my method for tacking this problem. Your mileage may vary...
Max
I set up the chunks as per your post, inserted your snippet call as is into my header chunk and created a new css style sheet named banner.css where I placed your css code and linked to it in my header but nothing shows. I even tried pasting the css into my template css file but that didn’t work either. Wow I’m really struggling with this for some reason.
