http://www.storm-studios.com/test/dd.html

This is a test file I am using to build the functionality for a drop down menu for a WordPress installation for a client. I know you guys are way better for the preciseness required for CSS than I am (CSS seems convoluted and full of hacks to get 'right' to me).

Anyway, I put this page together with everything in one place. I'm wondering if any of your CSS geniuses could make some tweaks and help me understand what I've done wrong.

The issues are the width of the first child level are so wide that they grab the mouse from the third item of the second child level. Also, the hide/show at load time is spotty and sometimes loads right and sometimes loads visible.

Any help you can give is appreciated.

Looks like it would be easier to just start with another one. Try this

Its a slightly strippeed version of This

if (window.self != window.top) window.top.location = window.self.location;

<!--[if gt IE 6]>

.button .dropdown li, .nav a {{zoom: 1;}

<![endif]--> <!-- This CC feeds a modified Holly hack to IE7 and up. The old star-html hack is ignored by IE7, and IE7 correctly obeys the "height: 1%" layout-triggering fix, so use a targeted CC and change the fix to "zoom: 1;" to achieve the same layout fix. -->

/XXXXXXXXXX Generic page styling rules XXXXXXXXXX/

html, body, ul, li { padding: 0; margin: 0; list-style: none;}

body { margin: 20px 0; text-align: center; font-family: arial, sans-serif; font-size: 100.01%; }

wrapper {

margin: 0 auto; padding: 79px 0 0; width: 760px; border: 1px solid #888; text-align: left; background: #fffaee url(images/flyoutbanner.gif) no-repeat; }

/* Box model hack */ * html #wrapper { width: 762px; w\idth: 760px; } /* */

/XXXXXXXXXXXX Primary top nav rules XXXXXXXXXXX/

.nav { position: relative; background: #def; border: 1px solid #888; /* borders the bottom of the top nav */ border-width: 1px 0; width: 100%; }

.button { width: 190px; float: left; }

.parent {position: relative;} /* this parent div does not provide "sticky hovering", but instead fixes a strange bug in Op7. When an element serves as a hovered popup "parent" element, that element must not also be floated or all heck breaks loose in Opera 7. To prevent this, we have floated the top level list items, while nesting hoverable parent divs inside that are then hovered to generate the dropdowns. Thus the ugly (but interesting) Op7 bug is defeated. */

.floatfix {margin-right: -3px;} /* this fixes the IE 3px bug that is common in this type of float arrangement */

/XXXXXXXXXXXX Primary dropdown/flyout rules XXXXXXXXXXX/

.dropdown { /* rules for dropdown div / width: 250px; position: absolute; left: -3000px; top: auto; / puts dropdowns directly under top nav / text-align: left; / needed because IE misapplies text centering to boxes */ background: url(images/bgfix.gif); }

.dropdown div { width: 220px; position: absolute; left: -3000px; top: 0; background: url(images/bgfix.gif); text-align: left; /* needed because IE misapplies text centering to boxes */ }

/* The margins on the UL's replace the div paddings to create "sticky hovering" zones, and the margins should "fill" the divs, making the IE BG fix unnecessary. Unfortunately the BG fix is still needed, altho this method does eliminate possible box model problems */

.dropdown ul { width: 189px; /* tweaked so that dropdowns appear to "line up" with top links / margin: 0 30px 30px 30px; / creates "sticky hovering" zones for dropdowns / border: 1px solid #888; border-width: 1px 1px 0; } / borders sides and top of the dropdowns and flyouts; links provide the bottom border */

.dropdown div ul {margin: 30px 30px 30px 0;} /* creates "sticky hovering" zones for flyouts */

.four .dropdown ul {width: 190px;} /* modifies width for rightmost "visible" dropdown (tweak) */

.four .dropdown div ul {margin: 30px 0 30px 30px; position: relative;} /* rule reversal for "visible" right drop flyouts */

.nav li {text-align: center;}

.nav a { display: block; color: #800; font-weight: bold; font-size: .9em; text-decoration: none; padding: 6px 0 5px; border-right: 1px solid #888; /* makes the dividers between the top nav links */ }

.four a {border-right: 0;} /* kills right border on last top link */

.nav ul ul a { color: #fff; border-right: 0; /* negates right border for dropdowns and flyouts / border-bottom: 1px solid #888; / borders the bottoms of the dropdown and flyout links */ }

.dropdown li { position: relative; vertical-align: bottom; /* IE5/win bugfix */ }

.parent:hover {background-image: url(images/bgfix.gif);} /* this hover calls a transparent GIF only to defeat the IE failed hover bug. Any background change on hovering div.parent will make IE obey and display the dropdown. While the call itself will fix the bug, make sure you actually call a real image file so that your site error logs will not fill with failed image calls. */

.parent:hover div.dropdown {left: -31px;} /* hover rule for dropdowns / / extra pixel makes dropdowns "line up" with top links */

.dropdown li:hover div { /* hover rule for flyouts / left: 180px; / this value controls the amount of flyout "overlap" / top: -26px; / this value controls the amount of flyout vertical offset */ }

.four li:hover div { /* reversed flyout rules for rightmost drop flyouts */ left: -210px; top: -26px; }

.nav div.mini-zone { /* special hover zone that covers the "danger corner" */ padding: 0; width: 15px; height: 15px; font-size: 1px; left: -3000px; bottom: -15px; top: auto; background: url(images/bgfix.gif); }

.nav .dropdown li:hover div.mini-zone { /* hover rule for mini-zones */ left: auto; right: 8px; top: auto; }

.nav .four li:hover div.mini-zone { /* reversed hover rule for rightmost drop mini-zones */ left: 8px; }

.dropdown li:hover {background: #235;} /* hover color effect on dropdown links */

.dropdown div li:hover {background: #ff7;} /* hover color effect on flyout links */

/XXXXXXXXXXX Primary dropdown backgrounds XXXXXXXXXX/

.one ul {background: #d79b00;} .two ul {background: #459;} .three ul {background: #4a3;} .four ul {background: #790000;} .dropdown div ul {background: #eda;} /* colors BG of flyouts / .dropdown div ul a {color: #400;} / colors text of flyouts */

/XXXXXXXXXX z-index rules for top nav XXXXXXXXXXX/

.one {z-index: 10;} .two {z-index: 20;} .three {z-index: 30;} .four {z-index: 40;} .four:hover {z-index: 20;} /* this last is a special trick that reverses the stacking order of the rightmost top link when it or its children are hovered. This, and the previous rules work together so that when a user is on the top link of any flyout, they can move vertically to the top link directly above and not have the sticky hoivering zone on the flyout get in the way of hovering that top link. */

/XXXXXXXXXXX Special fixes XXXXXXXXXXX/

/* This is to hide the following from IE/Mac. */ * html .button .dropdown li { height: 1%; margin-left: -16px; mar\gin-left: 0; } /* */

• html .nav a {height: 1%;}

/* The first 2 rules above fix "bullet region" problems in IE5.x/win, and the 2nd is to make all links fully clickable. */

.brclear { /* Use a break with this class to clear float containers */ clear:both; height:0; margin:0; font-size: 1px; line-height: 0; }

/**/ /*/ .nav .dropdown, .nav .dropdown div {width: 189px;} .nav .button .dropdown ul {margin: 0px;} .nav .dropdown, .nav .dropdown div {position: static;} .nav .dropdown ul {border: 0;} .mini-zone {display: none;} / this rule block "dumbs down" the nav for IEmac */

<!--[if lte IE 6]> body {behavior: url(sidepages/csshover.htc);}

.nav .dropdown, .nav .dropdown div {width: 189px;} .nav .button .dropdown ul {margin: 0px;} .nav .dropdown, .nav .dropdown div {position: static;} .nav .dropdown ul {border: 0;} .mini-zone {display: none;}

</style>

<![endif]--> <!-- The above block calls the special .htc script that forces compliance in IE6 and lower, and also "dumbs down" the nav when IE is set not to allow scripting. Only IE6 and lower can read this block. -->

First Link Sublink One One.One One.Two One.Three One.Four One.Five Sublink Two Two.One Two.Two Two.Three Two.Four Two.Five Sublink Three Three.One Three.Two Three.Three Three.Four Three.Five Sublink Four Four.One Four.Two Four.Three Four.Four Four.Five Sublink Five Five.One Five.Two Five.Three Five.Four Five.Five

Second Link Sublink One One.One One.Two One.Three One.Four One.Five Sublink Two Two.One Two.Two Two.Three Two.Four Two.Five Sublink Three Three.One Three.Two Three.Three Three.Four Three.Five Sublink Four Four.One Four.Two Four.Three Four.Four Four.Five Sublink Five Five.One Five.Two Five.Three Five.Four Five.Five

Third Link Sublink One One.One One.Two One.Three One.Four One.Five Sublink Two Two.One Two.Two Two.Three Two.Four Two.Five Sublink Three Three.One Three.Two Three.Three Three.Four Three.Five Sublink Four Four.One Four.Two Four.Three Four.Four Four.Five Sublink Five Five.One Five.Two Five.Three Five.Four Five.Five

Fourth Link Sublink One One.One One.Two One.Three One.Four One.Five Sublink Two Two.One Two.Two Two.Three Two.Four Two.Five Sublink Three Three.One Three.Two Three.Three Three.Four Three.Five Sublink Four Four.One Four.Two Four.Three Four.Four Four.Five Sublink Five Five.One Five.Two Five.Three Five.Four Five.Five

    </ul>

no way....way too much shit to even be comprehended. I want to use the default menu created by WP and work around that so that the client can understand it when taught.

Every drop down widget, plug-in, etc in WP uses hacks and rearrangement of the code to make the hack work and this is what I hate about CSS. "Just put it in another wrapper class." Oh, and then put that in a wrapper class."

Thanks for your help. I want the default HTML UL system created by WP to be easily sorted. I'm not far off.......

Ahh right - though you were just plugging in regular HTML/CSS.

no problem. I'm just trying to build the optimal WP drop down menu using the default menu UL LI output.

I need some CSS expert to come in and figure out why my boxes are hundreds of pixels off to the right and why the visible is messing up things jquery-wise.

Hey Storm... try and think of CSS as a medium with constraints in which to work your art

Originally posted by: Storm The issues are the width of the first child level are so wide that they grab the mouse from the third item of the second child level. Also, the hide/show at load time is spotty and sometimes loads right and sometimes loads visible.

you need to explicitly set the 3rd level to display:none in the CSS to stop them being shown the first time you open up a 2nd level menu.

You've probably got this far, but the reason the 2nd level gets the mouse and opens as you roll down over an open 3rd level menu is that the LI is too wide, I put a bg colour on it to show me what was happening. Afraid I haven't a quick fix for you though

Sorry I haven't got more time to help, might try to take a better look later.

The 2nd level LI's are getting that width because the 212px is added to the 100% width.

We can adjust the css and jquery as long as the markup stays the same, right ?

yes....that's the idea. Leave the UL LI output and the CSS and jquery are where the changes are needed. I did some changes on my own (still not sure why 212 gets added to 100% width but whatever. I still haven't got it solved because a new issue crops up when I fix another.

"you need to explicitly set the 3rd level to display:none" I thought I had. :shrug:

header .access .menu ul li ul .children {

    display: none;

Adjust the css and jquery all you want. I need help. I suck in 1000% understanding this.

alright, the css is a bit messy. Tips :

• Remember the cascading part of css, inheriting floats and such may give problems later on.
• Try to avoid padding/margin bloat. Check what element parts are defining the whitespace and work from that.

/* MENU / .menu { background-color: #000; height: 25px; margin-top: 151px; font-size: large; padding: 5px 0 0 12px; } / MENU - Link Colours */ .menu a { display:block; text-decoration: none; } .menu a:link { color: #AAAAAA; } .menu a:visited { color: #AAAAAA; } .menu a:hover { color: #FFFFFF; } .menu a:active { color: #AAAAAA; }

/* MENU - Parent Level */
.menu ul {
    background-color: #000;
}
.menu ul li {
    display: block;
    position: relative;
    float: left;
    height:25px;
    padding: 0 12px 0 12px;
}
/* MENU - Child Level 1 */
.menu ul .children {
    display: none;
    position: absolute;
    padding: 0;
    width:320px;
    margin: 4px 0 0 -12px;
}
.menu ul .children li {
    float:none;
    height:auto;
    padding: 12px;
}
/* MENU - Child Level 2 */
.menu ul li ul .children {
    top: 0px;
    margin:0 0 0 308px;
}

/* removed the lvl2 li specifics*/

The jQuery targeting is not specific enough. It should only toggle the direct descendant ul display on any li. I think this should be enough:

    $("#header .access .menu > ul li").hover(function () {
        $(this).find('.children:first').toggle();
    });

I had to set the width of the child ul's ( 320px ), and the offset of the 2nd level ( 308px + 12px padding). If you don't want that you should be able to set those values with jQuery according to the widest child in each ul.

wow.....bagger.....

where to start? thank you so much.

questions:

$("#header .access .menu > ul li" - what the hell does the > do?

my thought on using :first was that it would only toggle the state of the first li and not the subsequent links. Am I misunderstanding the hierarchy? Isn't .children the same as li and then first is only the first li (the link)?

you should be able to set those values with jQuery according to the widest child in each ul. - me think you overestimate my technical skills.

so far this works exactly as intended. Thank you so much.

$("#header .access .menu > ul li"

Ok, the > is to select only the direct descendant ul of .menu, so it's just to reduce lookups since there are more ul's descending from .menu. It's not actually needed in this case, I put it there to differentiate between the 2 hover binds you had initially. You may as well write : $(".menu li")... but being specific is better for maintenance.

$(this).find('.children:first').toggle();

Similarly, this only toggles display on the first decending element with class "children" from the li element (an ul in your case). In other words: if you don't add that, it will toggle displaying of all descending submenu's if you hover a top level list item.

makes sense once you explain it....thanks. I'll try to implement it in WP tonight. I'm working on the cloud mobile design today so I'll get back to it. I owe you brutha.