popout menu Options

[Darin McGrew]

AFAICS, the CSS is doing just what you told it to do. The sublists start out positioned off-screen to the left. When you hover over a menu item, its sublist is repositioned in its normal location (left: auto).

What is it that you want to happen differently?

[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.

[Frederiek]

I forgot to say that I based that on your menu1.html code.

[minidiapolis]

It's getting there. I'm still having problems though. . . if the mouse is over About Us that popout menu flips out, but if the mouse goes down to programs, that popout menu flips out as well.

Also, do I need separate html pages for our beliefs, doctrine, etc..?

[Darin McGrew]

Do you mean that you see both the "About Us" submenu and the "Programs" submenu at the same time? I see only one at a time, depending upon which top menu entry I'm hovering over.

If you're going to have separate links for beliefs, doctrine, and mission statement, then you need either separate pages for each one, or you need multiple anchors on a single page (so you can link to the anchors).

[Frederiek]

I found that the markup didn't validate. So I corrected both your and mine errors.

Then I thought it to be odd to have a link on the main menu items, though depending on where you want to go from there. So I changed those with a sub-menu to <p> tags, for which I gave CSS rules (to get rid of default margins on P tags, and a cursor to indicate some kind of link attachment (the hover)). See the result of all this in the attached file below (open it in a simple text-editor (not Word!)).

All this doesn't explain the double dropdown. Like Darin, I don't see that.

 menu.html ( 2.33k ) Number of downloads: 700

[minidiapolis]

Why isn't the border color changing to white?

[Darin McGrew]

It looks like a result of your CSS errors.

[minidiapolis]

Why isn't the picture showing up as the bullet? I followed the example on http://css.maxdesign.com.au/listamatic/vertical04.htm. Also, how can I put a vertical line between the bullet/picture and the menu option like on www.fountainchurch.org

[Darin McGrew]

Why isn't the picture showing up as the bullet?

Where will the image be displayed? You've set the margins/padding to 0.

[minidiapolis]

I have played around with the margin/padding, still no picture

[pandy]

The images are there in FF. They'll be there in Opera too, if given some space to live in. But I don't think this will work in IE. I don't remember the details, but I think IE doesn't consider floated LIs to be list items anymore (display-wise), so no bullet.

[minidiapolis]

So what do I do for IE?

This post has been edited by minidiapolis: Apr 29 2008, 10:09 PM

[pandy]

Dunno if there is a way. Use a background image instead.

[Frederiek]

AFAICS, it's already a background image.

Problem is, the puddle image is too big to be some kind of "bullet", which makes the menu exaggeratedly big too. Normally, one would use a smaller image. An idea would be to use just a waterdrop or something.

See how Simplebits codes this kind of list (see the comments in the CSS for the width and height of the icon) at http://www.simplebits.com/notebook/2004/07/18/clickable.html.

And the image of the sub-menu shows behind the main menu items (except the last one of course). The sub-menu has to fold out sufficiently to the right to prevent this.

[pandy]

Am I looking at the wrong page? I looked at the last referred to (by Darin above) and there it's used with list-style-image.
http://www.fountainchurch.org/menu1.html

[Frederiek]

Ah, yes, it's the correct page and you're right, it is used as a list-style-image.

BTW, positioniseverything wrote about an IE bug which is caused by placing a list with a background set within a floated <div> that has been relatively positioned. See the article: The IE/Win Disappearing List-Background Bug. Is that what you mean, Pandy? But I don't think this is the issue here, as there is no <div> around the list at all.

[pandy]

No. The image isn't used as a background, remember?

In IE it's enough to float the LIs for their bullets to disappear. No other styling needed. I'm not sure about IE7, but I think it's the same.

[pandy]

For you.



I'd better add that it doesn't help to add margin/padding.

[Frederiek]

Do you mean to say that most of maxdesign's Listamatic menu's don't work in IE, at least proir to IE7? What about the Simplebits sample? And what not…

Once I start up my VM, and when I remember, I'll give it a try.