Well I got wayfinder to work on my website, now I want a drop down menu. I wrote one out in html from the suckerfish menu. I want to use wayfinder to look like this www.extremecomposites.com/home2.html but I can’t figure out how in wayfinder. One is that I want the folder to show up as a drop down menu but I don’t wan’t it to be linking to a page. Like the GM Products is for a menu drop down only and not a page. I have nothing that to be a page, just a drop down menu. The modx is at www.extremecomposites.com/index.php
Code from my menu on the page
<div class="menu">
<ul id="nav">
<li class="parent">GM Products
<ul>
<li class="daddy">GM Trucks
<ul>
<li><a href="#">C-Tech Hood</a></li>
<li><a href="#">Ram Air Hood</a></li>
<li><a href="#">C5 Tailgate</a></li>
<li><a href="#">C5 Rollpan</a></li>
</ul>
</li>
<li class="daddy">Cadillac</a>
<ul>
<li><a href="#">CTS Hood</a></li>
</ul>
</li>
</ul>
</li>
<li class="parent">Ford</a>
<ul>
<li><a href="#">Mustang</a></li>
<li><a href="#">C-Tech</a></li>
</ul>
</li>
</ul>
</div>
</div>
Code from my CSS file
.menu {
background-color: transparent;
border: 0px;
border-style: solid;
border-color: #FFFFFF;
width: 100%;
height:25px;
position: absolute;
float: left;
top: 77px;
left: 5px;
clear: left;
}
#nav, #nav ul {
float: left;
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
color: #80C9FF;
font-weight: 700;
font-family: times;
}
#nav a {
display: block;
width: 10em;
color: #FF0000;
background-color: #BCBDB5;
font-size: 12pt;
text-decoration: none;
}
#nav li {
float: left;
width: 10em;
color: #80C9FF;
font-weight: 700;
font-family: times;
line-height: 1;
}
#nav li ul {
position: absolute;
width: 10em;
left: -999em;
background-color: #BCBDB5;
font-size: 12pt;
color: #00487D;
}
#nav li ul ul {
margin: -0.9em 0 0 10em;
}
#nav li:hover ul {
left: auto;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
#nav li:hover ul ul, #nav li.sfhover ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {
left: auto;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
.parent {
display: block;
width: 10em;
cursor: default;
font-size: 14pt;
line-height: 1;
}
.daddy {
background: url(graphics/spacer.gif) center right no-repeat;
width: 10em;
cursor: default;
background-color: #676569;
font-size: 12pt;
line-height: 1;
}
Edit: Just noticed the previous post about the folder question. I don’t understand the wrapper/chunk things with modx. Thanks for the help
Edit Edit: Ok, so I found about the folder deal. I’m still hung up on trying to get the css to look right with such limited classes and such but I think I can figure out most of it. Still don’t understand what a wrapper is though.
