Struggling to set up a menu style

HTML & CSS
1

I am using one of the dropline menus that are available at Stu Nicholls CSSplay site. I have been quite successful in tailoring it for my needs, but I lack the sophisticated CSS skills to completely understand it.

What I am trying to do is to use a different style for one dropline than I do for all of the others. I had thought that it would just require me to set up the style and use an ID specification, but that doesn’t work as I have coded it.

There is a lot of stuff in this, so for simplicity I’ll start by extracting the key lines. Later I’ll append the entire module and style.

First the 2 styles:

/* defines the drop line hover bar for all normal links */
#droplineMenu ul ul :hover div {left:0; top:30px; width:998px; text-align:center; height:30px;}
#droplineMenu ul ul li div b {display:block; width:998px; height:30px; position:absolute; left:0; top:0; background:url(DroplineBG.gif); z-index:-1; padding:0; line-height:30px;} 

/* defines the drop line hover bar for Members Only link, once it is visible */
#droplineMenu ul ul#MOlinks :hover div {left:0; top:30px; width:998px; text-align:center; height:60px;}
#droplineMenu ul ul#MOlinks li div b {display:block; width:998px; height:60px; position:absolute; left:0; top:0; background:url(DroplineBG.gif); z-index:-1; padding:0; line-height:30px;}

(Note that the only difference is the #MOlinks)

Now the HTML fragment … I will include one normal and the one I have tried to change …

<li><a><b>About Us</b></a>
            <div><b></b>
                <ul>
                    <li><a href="#url">Directions</a></li>
                    <li><a href="#url">Contacts</a></li>
                    <li><a href="#url">Audubon</a></li>
                    <li><a href="#url">Careers</a></li>
                    <li><a href="#url">Website Credits</a></li>
                    <li><a href="#url">Legal</a></li>
                    <li><a href="http://whitevalegc.blogspot.com/" >Whitevale Blog</a></li>
                </ul>
            </div>
            </li>
            <cfif NOT IsDefined("Session.IsLoggedIn")>
                <li><a href="javascript:ColdFusion.Window.show('Login');ColdFusion.navigate('../MemberLogin.cfm','Login');">
                    <b>Members Only</b></a></li>
            <cfelse>
                <li><a href="../Members/MemberHome.cfm"><b>Members Only</b></a>
            <div><b></b>
                <ul id="MOlinks">
                    <li><a href="../Members/TeeTimes.cfm">Tee Times</a></li>
                    <li><a href="../Members/Handicap.cfm">Scores & Handicaps</a></li>
                    <li><a href="../Members/MemberLookup.cfm">Member Lookup</a></li>
                    <li><a href="../Members/TeeTimes.cfm">Event Calendar</a></li>
                    <li><a href="../Members/Sideline.cfm">Sideline 30</a></li>
                    <li><a href="../Members/ListBoard.cfm">Bulletin Board</a></li>
                    <li><a href="../Members/TeeTimes.cfm">Statements</a></li>
                    </ul>
                </div>
                </li>
                </cfif>
        </ul>

(Note that the only difference is in the ID=“MOlinks” specification)

And finally, the full style sheet, then the full nav bar code for those who want to see it all …

#droplineMenu {height:30px; position:relative; text-align:center; width:998px; margin:0 auto; z-index:100;}
#droplineMenu ul {padding:0; margin:0; list-style:none;}
#droplineMenu ul ul li {float:left;}
#droplineMenu ul ul li a {display:block; float:left;}
#droplineMenu ul ul div {position:absolute; left:-9999px; overflow:hidden;}

#droplineMenu ul#menuOuter {display:inline-block; padding-left:124px;} 
#droplineMenu ul#menuOuter li.lv1-li {display:inline-block; height:30px;}

#droplineMenu ul ul li a {height:30px; line-height:30px; padding:0 15px 0 0; font-size:13px; font-weight: bold; font-family: arial; color:#fff; text-decoration:none; }
#droplineMenu ul ul li a b {display:block; height:30px; float:left; padding:0 0 0 20px; font-weight:bold; cursor:pointer;}
#droplineMenu ul ul li a:hover {background:url(tabg.gif) right top; line-height:30px;}
#droplineMenu ul ul li a:hover b {color:#fc0; background:url(tabg.gif) left top; line-height:30px;}

#droplineMenu ul ul li:hover > a {background-color:#649546; line-height:30px; }
#droplineMenu ul ul li:hover > a b {color:#fc0; background-color:#649546; line-height:30px;}

/* defines the drop line hover bar for all normal links */
#droplineMenu ul ul :hover div {left:0; top:30px; width:998px; text-align:center; height:30px;}
#droplineMenu ul ul li div b {display:block; width:998px; height:30px; position:absolute; left:0; top:0; background:url(DroplineBG.gif); z-index:-1; padding:0; line-height:30px;} 

/* defines the drop line hover bar for Members Only link, once it is visible */
#droplineMenu ul ul#MOlinks :hover div {left:0; top:30px; width:998px; text-align:center; height:60px;}
#droplineMenu ul ul#MOlinks li div b {display:block; width:998px; height:60px; position:absolute; left:0; top:0; background:url(DroplineBG.gif); z-index:-1; padding:0; line-height:30px;}

#droplineMenu ul ul li div ul {display:inline-block;}
#droplineMenu ul ul li div ul li {display:inline-block; display:inline;}

#droplineMenu ul ul div a {background:url(DroplineBG.gif); height:30px; line-height:30px; font-size:13px; padding:0 20px;}
#droplineMenu ul ul div a:hover {background:url(DroplineBG.gif); color:#fc0; line-height:30px;}

<div id="droplineMenu">
<ul id="menuOuter">
    <li class="lv1-li">
        <ul>
            <li><a><b>Plan Your Day</b></a>
            <div><b></b>
                <ul>
                    <li><a href="../Plan/Directions.cfm">Directions</a></li>
                    <li><a href="../Plan/Contacts.cfm">Contacts</a></li>
                    <li><a href="../Plan/DressCode.cfm">Dress Code</a></li>
                    <li><a href="../Plan/GuestFees.cfm">Guest Fees</a></li>
                    <li><a href="../Plan/GuestFac.cfm">Guest Facilities</a></li>
                    <li><a href="../Plan/Weather.cfm" class="last">Weather</a></li>
                </ul>
            </div>
            </li>
            <li><a><b>Golf Course</b></a>
            <div><b></b>
                <ul>
                    <li><a href="#url">Hole-by-Hole</a></li>
                    <li><a href="#url">Scorecard</a></li>
                    <li><a href="/GolfCourse/PhotoGallery.cfm">Photo Gallery</a></li>
                    <li><a href="#url">Practice Facilities</a></li>
                    <li><a href="#url">Pro Shop</a></li>
                    <li><a class="last" href="#url">McBroom Design</a></li>
                </ul>
            </div>
            </li>
            <li><a><b>Events</b></a>
            <div><b></b>
                <ul>
                    <li><a href="#url">Dining Facilities</a></li>
                    <li><a href="#url">Invitationals</a></li>
                    <li><a href="#url">Weddings &amp; Banquets</a></li>
                    <li><a class="last" href="#url">Tournaments</a></li>
                </ul>
            </div>
            </li>
            <li><a><b>Membership</b></a>
            <div><b></b>
                <ul>
                    <li><a href="#url">Why Join</a></li>
                    <li><a href="#url">Reciprocals</a></li>
                    <li><a href="#url">Community</a></li>
                    <li><a href="#url">The Costs</a></li>
                    <li><a href="#url">How to Join</a></li>
                    <li><a href="#url">Improve Your Game</a></li>
                    <li><a class="last" href="#url">Junior Golf</a></li>
                </ul>
            </div>
            </li>
            <li><a><b>Tradition</b></a>
            <div><b></b>
                <ul>
                    <li><a href="#url">Our History</a></li>
                    <li><a href="#url">50th Anniversary</a></li>
                    <li><a href="#url">Achievements</a></li>
                    <li><a href="#url">Wall of Fame</a></li>
                    <li><a class="last" href="#url">Strategic Plan</a></li>
                </ul>
            </div>
            </li>
            <li><a><b>About Us</b></a>
            <div><b></b>
                <ul>
                    <li><a href="#url">Directions</a></li>
                    <li><a href="#url">Contacts</a></li>
                    <li><a href="#url">Audubon</a></li>
                    <li><a href="#url">Careers</a></li>
                    <li><a href="#url">Website Credits</a></li>
                    <li><a href="#url">Legal</a></li>
                    <li><a href="http://whitevalegc.blogspot.com/" >Whitevale Blog</a></li>
                </ul>
            </div>
            </li>
            <cfif NOT IsDefined("Session.IsLoggedIn")>
                <li><a href="javascript:ColdFusion.Window.show('Login');ColdFusion.navigate('../MemberLogin.cfm','Login');">
                    <b>Members Only</b></a></li>
            <cfelse>
                <li><a href="../Members/MemberHome.cfm"><b>Members Only</b></a>
            <div><b></b>
                <ul id="MOlinks">
                    <li><a href="../Members/TeeTimes.cfm">Tee Times</a></li>
                    <li><a href="../Members/Handicap.cfm">Scores & Handicaps</a></li>
                    <li><a href="../Members/MemberLookup.cfm">Member Lookup</a></li>
                    <li><a href="../Members/TeeTimes.cfm">Event Calendar</a></li>
                    <li><a href="../Members/Sideline.cfm">Sideline 30</a></li>
                    <li><a href="../Members/ListBoard.cfm">Bulletin Board</a></li>
                    <li><a href="../Members/TeeTimes.cfm">Statements</a></li>
                    </ul>
                </div>
                </li>
                </cfif>
        </ul>
    </li>
</ul>
</div>
2

We have a relatively closed community of users for this application and they are already accustomed to using a drop down menu scheme that is built in JavaScript. It gives me pleasure to get away from the JavaScript because of some of the differences in different browsers. This version will be strictly CSS based and is less intrusive visually because it stays at the top of the window.

For the interest of anyone reading this thread, the final CSS I am using is as follows:

/* defines the drop line hover bar for Members Only link, once it is visible */
#droplineMenu ul ul li#MOLinks div {height: 60px; text-align:center;}
#droplineMenu ul ul :hover li#MOLinks div {height: 60px; }
#droplineMenu ul ul li#MOLinks div a {background: url(DroplineBG.gif); height: 30px; line-height: 30px; font-size: 13px; padding: 0 20px;}
#droplineMenu ul ul li#MOLinks div b {height:60px;}

While I can’t explain it all, this gives me the double line I wanted. Thanx for the help in getting the job done.

3

Thanx. I should be able to figure it out from that. I grabbed your code and put it in a separate page which came out red so I know that much works.

One thing though … the height:60px; didn’t work. Is there something else needed to get it to apply the height?

4

It’s the overflow:hidden on the div that is hiding the extra height. You can remove it for the members link like so:


#droplineMenu ul ul li#MOlinks div {overflow:visible}

I’m not sure why you need it in the first place on looking quickly,

5

Nope, didn’t work (and I tried several variations on that). I think we’re getting warmer … this business of embedding ul’s makes it very confusing.

6

As it happens, I’m getting conflicting advise from the original menu list. One person is telling me to move everything down to the li in the second list. (It didn’t work.)

I will do some experimenting with this, but what I observe before starting is that you are suggesting that I put the style on the li for the outer list, but in the CSS, the order of specifications is ul ul li (i.e., the inner list) … wouldn’t that conflict?

7

Hi,

You have the id in the wrong place as it should be on the parent list that holds that nested ul.

e.g. here:


<li[B] id="MOlinks"><[/B]a href="../Members/MemberHome.cfm"><b>Members Only</b></a>
                    <div><b></b>
                        <ul>
                            <li><a href="../Members/TeeTimes.cfm">Tee Times</a></li>
                            <li><a href="../Members/Handicap.cfm">Scores & Handicaps</a></li>
                            <li><a href="../Members/MemberLookup.cfm">Member Lookup</a></li>
                            <li><a href="../Members/TeeTimes.cfm">Event Calendar</a></li>
                            <li><a href="../Members/Sideline.cfm">Sideline 30</a></li>
                            <li><a href="../Members/ListBoard.cfm">Bulletin Board</a></li>
                            <li><a href="../Members/TeeTimes.cfm">Statements</a></li>
                        </ul>
                    </div>
                </li>

Then re-align the code to point to that element. You only need to supply the differences as the memu is already positioned with the existing code.


#droplineMenu ul ul l[B]i#MOlinks[/B] :hover div {
   [B] height:60px;[/B]
}
#droplineMenu ul ul [B]li#MOlinks[/B] div b {
    [B]background:red;
    height:60px;[/B]
}
8

I have loaded this page up so it can be readily seen …

http://www2.whitevalegolfclub.com/Public/NavTest2.cfm

It contains the stuff from Paul O’B imbedded into some of my page standard coding. What you can see is all the CSS and nav links plus the result … the red shows through but the height isn’t happening. As a minimum, I’d expect the background image to be duplicated (as it did before when I only had height 60).

9

The height:60px shouldn’t have needed anything else to work :slight_smile:

10

Yes that’s a good point and something like the superfish add on is a useful accessibility enhancement as it allows for a delay on the menu so that users with some motor disability can still get their mouse to the target.

I often find dropdowns hard to navigate because you just have to slip of the menu for a fraction and then it’s gone. The superfish allows a delay so that you can still move off the target and back again without it flicking off in the meantime.

Using javascript to enhance something and make it better is a good use of javascript. :slight_smile:

11

not sure if you’ll find it useful, but here it goes: your two levels menu has a far too aggressive appearance and disappearance act :slight_smile: will not be thought off well. and the second level keep flickering will make for an annoying little thing that will get in the mind of your users.

that’s it. hope you don’t mind :slight_smile:

12

Yes it does work exactly as I said. My code always works :wink:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body {
    background:#999
}
#droplineMenu {
    height:30px;
    position:relative;
    text-align:center;
    width:998px;
    margin:0 auto;
    z-index:100;
}
#droplineMenu ul {
    padding:0;
    margin:0;
    list-style:none;
}
#droplineMenu ul ul li {
    float:left;
}
#droplineMenu ul ul li a {
    display:block;
    float:left;
}
#droplineMenu ul ul div {
    position:absolute;
    left:-9999px;
    overflow:hidden;
}
#droplineMenu ul#menuOuter {
    display:inline-block;
    padding-left:124px;
}
#droplineMenu ul#menuOuter li.lv1-li {
    display:inline-block;
    height:30px;
}
#droplineMenu ul ul li a {
    height:30px;
    line-height:30px;
    padding:0 15px 0 0;
    font-size:13px;
    font-weight: bold;
    font-family: arial;
    color:#fff;
    text-decoration:none;
}
#droplineMenu ul ul li a b {
    display:block;
    height:30px;
    float:left;
    padding:0 0 0 20px;
    font-weight:bold;
    cursor:pointer;
}
#droplineMenu ul ul li a:hover {
    background:url(tabg.gif) right top;
    line-height:30px;
}
#droplineMenu ul ul li a:hover b {
    color:#fc0;
    background:url(tabg.gif) left top;
    line-height:30px;
}
#droplineMenu ul ul li:hover > a {
    background-color:#649546;
    line-height:30px;
}
#droplineMenu ul ul li:hover > a b {
    color:#fc0;
    background-color:#649546;
    line-height:30px;
}
/* defines the drop line hover bar for all normal links */
#droplineMenu ul ul :hover div {
    left:0;
    top:30px;
    width:998px;
    text-align:center;
    height:30px;
}
#droplineMenu ul ul li div b {
    display:block;
    width:998px;
    height:30px;
    position:absolute;
    left:0;
    top:0;
    background:url(DroplineBG.gif);
    z-index:-1;
    padding:0;
    line-height:30px;
}
/* defines the drop line hover bar for Members Only link, once it is visible */
#droplineMenu ul ul li#MOlinks :hover div {
    height:60px;
}
#droplineMenu ul ul li#MOlinks div b {
    background:red;
    height:60px;
}
#droplineMenu ul ul li div ul {
    display:inline-block;
}
#droplineMenu ul ul li div ul li {
    display:inline-block;
    display:inline;
}
#droplineMenu ul ul div a {
    background:url(DroplineBG.gif);
    height:30px;
    line-height:30px;
    font-size:13px;
    padding:0 20px;
}
#droplineMenu ul ul div a:hover {
    background:url(DroplineBG.gif);
    color:#fc0;
    line-height:30px;
}
</style>
</head>
<body>
<div id="droplineMenu">
    <ul id="menuOuter">
        <li class="lv1-li">
            <ul>
                <li><a><b>Plan Your Day</b></a>
                    <div><b></b>
                        <ul>
                            <li><a href="../Plan/Directions.cfm">Directions</a></li>
                            <li><a href="../Plan/Contacts.cfm">Contacts</a></li>
                            <li><a href="../Plan/DressCode.cfm">Dress Code</a></li>
                            <li><a href="../Plan/GuestFees.cfm">Guest Fees</a></li>
                            <li><a href="../Plan/GuestFac.cfm">Guest Facilities</a></li>
                            <li><a href="../Plan/Weather.cfm" class="last">Weather</a></li>
                        </ul>
                    </div>
                </li>
                <li><a><b>Golf Course</b></a>
                    <div><b></b>
                        <ul>
                            <li><a href="#url">Hole-by-Hole</a></li>
                            <li><a href="#url">Scorecard</a></li>
                            <li><a href="/GolfCourse/PhotoGallery.cfm">Photo Gallery</a></li>
                            <li><a href="#url">Practice Facilities</a></li>
                            <li><a href="#url">Pro Shop</a></li>
                            <li><a class="last" href="#url">McBroom Design</a></li>
                        </ul>
                    </div>
                </li>
                <li><a><b>Events</b></a>
                    <div><b></b>
                        <ul>
                            <li><a href="#url">Dining Facilities</a></li>
                            <li><a href="#url">Invitationals</a></li>
                            <li><a href="#url">Weddings &amp; Banquets</a></li>
                            <li><a class="last" href="#url">Tournaments</a></li>
                        </ul>
                    </div>
                </li>
                <li><a><b>Membership</b></a>
                    <div><b></b>
                        <ul>
                            <li><a href="#url">Why Join</a></li>
                            <li><a href="#url">Reciprocals</a></li>
                            <li><a href="#url">Community</a></li>
                            <li><a href="#url">The Costs</a></li>
                            <li><a href="#url">How to Join</a></li>
                            <li><a href="#url">Improve Your Game</a></li>
                            <li><a class="last" href="#url">Junior Golf</a></li>
                        </ul>
                    </div>
                </li>
                <li><a><b>Tradition</b></a>
                    <div><b></b>
                        <ul>
                            <li><a href="#url">Our History</a></li>
                            <li><a href="#url">50th Anniversary</a></li>
                            <li><a href="#url">Achievements</a></li>
                            <li><a href="#url">Wall of Fame</a></li>
                            <li><a class="last" href="#url">Strategic Plan</a></li>
                        </ul>
                    </div>
                </li>
                <li><a><b>About Us</b></a>
                    <div><b></b>
                        <ul>
                            <li><a href="#url">Directions</a></li>
                            <li><a href="#url">Contacts</a></li>
                            <li><a href="#url">Audubon</a></li>
                            <li><a href="#url">Careers</a></li>
                            <li><a href="#url">Website Credits</a></li>
                            <li><a href="#url">Legal</a></li>
                            <li><a href="http://whitevalegc.blogspot.com/" >Whitevale Blog</a></li>
                        </ul>
                    </div>
                </li>
                <li id="MOlinks"><a href="../Members/MemberHome.cfm"><b>Members Only</b></a>
                    <div><b></b>
                        <ul>
                            <li><a href="../Members/TeeTimes.cfm">Tee Times</a></li>
                            <li><a href="../Members/Handicap.cfm">Scores & Handicaps</a></li>
                            <li><a href="../Members/MemberLookup.cfm">Member Lookup</a></li>
                            <li><a href="../Members/TeeTimes.cfm">Event Calendar</a></li>
                            <li><a href="../Members/Sideline.cfm">Sideline 30</a></li>
                            <li><a href="../Members/ListBoard.cfm">Bulletin Board</a></li>
                            <li><a href="../Members/TeeTimes.cfm">Statements</a></li>
                        </ul>
                    </div>
                </li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

Your code was miles out as you had this:


[COLOR=#CC00CC]#droplineMenu[/COLOR] ul [B]ul[COLOR=#CC00CC]#MOlinks[/COLOR] [/B][COLOR=#3333FF]:hover[/COLOR] div [COLOR=#66CC66]{[/COLOR]left[COLOR=#3333FF]:[COLOR=#993333]0[/COLOR][/COLOR]; top[COLOR=#3333FF]:[COLOR=#993333]30px[/COLOR][/COLOR]; width[COLOR=#3333FF]:[COLOR=#993333]998px[/COLOR][/COLOR]; text-align[COLOR=#3333FF]:center[/COLOR]; height[COLOR=#3333FF]:[COLOR=#993333]60px[/COLOR][/COLOR];[COLOR=#66CC66]}[/COLOR]

That would assume that the #MOlinks id was placed on this ul here:


<div id="droplineMenu">
    <ul id="menuOuter">
        <li class="lv1-li">
         [B]   <ul id="MOlinks">[/B]
                <li><a><b>Plan Your Day</b></a>
                    <div><b></b>
                        <ul>

You can’t put the id on a ul anyway as it has to be on the “li” so that the nested elements are targeted. Exactly as shown in my working code above :slight_smile: