popout menu Options

[minidiapolis]

I'm creating a popout menu for the very first time. Using this line as an example

sitems[0]=["<big><font face='Arial'>Site Menu</font></big>", ""]

is the first step to replace sitems with one of my menu options?

[Frederiek]

I think you got confused by the diffrent examples and mixed things up. That's partly my fault (sorry), but also caused by the fact that you don't seem to know what you are doing (no offence).

This is what your HTML for the menu should look like:

CODE

<ul id="nav">
    <li><a href="#">About Us </a>
        <ul>
            <li><a href="#">Our Beliefs</a></li>
            <li><a href="#">Our Doctrine</a></li>
            <li><a href="#">Mission Statement</a></li>
        </ul>
    </li>
    <li><a href="#">Programs</a>
        <ul>
            <li><a href="#">Z-street</a></li>
            <li><a href="#">FYI (Fountain Youth Inc)</a></li>
            <li><a href="#">Small Groups</a></li>
        </ul>
    </li>
    <li><a href="#">Staff </a>
        <ul>
            <li><a href="#">Ministry Team</a></li>
            <li><a href="#">Leadership Team<a></li>
        </ul>
    </li>
</ul>

and this your CSS:

CODE

body {
    font-family: Arial, Helvetica, sans-serif;
}
    
#nav, #nav ul { /* all lists */
    padding: 0;
    margin: 0;
    list-style: none;
    float : left;
    width : 11em;
}
    
#nav li { /* all list items */
    position : relative;
    float : left;
    line-height : 1.25em;
    margin-bottom : -1px;
    width: 11em;
}
    
#nav li ul { /* second-level lists */
    position : absolute;
    left: -999em;
    margin-left : 11.05em;
    margin-top : -1.35em;
}
    
#nav li a {
    width: 11em;
    w\idth : 10em;
    display : block;
    color : black;
    font-weight : bold;
    text-decoration : none;
    background-color : white;
    border : 1px solid black;
    padding : 0 0.5em;
}
    
    #nav li a:hover {
    color : white;
    background-color : black;
}
    
#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 { /* lists nested under hovered list items */
    left: auto;
}
    
#content {
    margin-left : 12em;
}

Put that in a test page and try it. I'm sure that's what you're after.