Apple Zen Support Thread

[reza]

hi
well this is what I get after just implementing header css flyout, I did changes in stylsheet.header_menu.css , and in order to get the menu bar goes to right as the site is right to left, I changed div#dropMenu li to float:right.
as I need this header, could you please check my css file and solve this problem, as you can see in the figure (zip file) mouse goes over a menu item, the submenu sping one box to left instead of being onder tjhat menu:
****************
stylesheet_header_menu.css
---------------------------------
body {
behavior: url(includes/csshover.htc);
}

/*green*/
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover {color: #4f4f4f!important;background:#D5E88F;}


/*blue
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #ffffff!important;background:#6C99D9;}
*/

/*red
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #ffffff!important;background:#DC262E;}
*/

/*grey
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #4f4f4f!important;background:#D5D5D5;}
*/

#dropMenuWrapper {
width:100%;
height:2.17em;
margin:0;
font-size:1em;
}

div#dropMenu {
width:70em;
margin:0 auto;
text-align:center;
z-index:1000;
position:relative;
}

div#dropMenu ul {
margin: 0;
padding: 0;
}

div#dropMenu li {
position: relative;
list-style: none;
margin: 0;
float: RIGHT;
line-height: 1em;
}

div#dropMenu ul.level1 {
width:70em;
margin:0 auto;
text-align:center;
background:#000000;
height:2.17em;
z-index:1000;
}

div#dropMenu li:hover {}
/*div#dropMenu li.submenu {background: url(../images/dropmenu.gif) 95% 50% no-repeat;} */
div#dropMenu li.submenu:hover {}
div#dropMenu li a {display: block; padding: .6em 2em .6em 2em;text-decoration: none; text-transform:uppercase; color:#ffffff; text-align:center; border-right:1px solid #ffffff;}
div#dropMenu>ul a {width: auto;}
div#dropMenu ul ul {position: absolute; width: 12em;display: none;}
div#dropMenu ul ul li {border-bottom: 1px solid #CCC; width:12em;}
/*div#dropMenu li.submenu li.submenu {background: url(../images/submenu.gif) 95% 50% no-repeat;} */
div#dropMenu ul.level1 li.submenu:hover ul.level2,
div#dropMenu ul.level2 li.submenu:hover ul.level3,
div#dropMenu ul.level3 li.submenu:hover ul.level4,
div#dropMenu ul.level4 li.submenu:hover ul.level5 {display:block;z-index:1000;}
div#dropMenu ul.level2 {top: 2.17em; background:#4f4f4f;z-index:1000;}
div#dropMenu ul.level3, div#dropMenu ul.level4, div#dropMenu ul.level5 {top: 0; left: -12em; background:#4f4f4f}
div#dropMenu ul.level2 a {padding: 0.5em 0 0.5em 0.25em;color: white; text-transform:none;} /* this is text color on drop-down submenu */
div#dropMenu ul.level2 a:hover {color:#4f4f4f;}
-*************************************************

thanks

[reza]

hi jettrue
again I come to ask you another question,
because I have too much category and in sideboxes is very horrible figure to get show them , I found in http://www.amazon.com/, above when your mouse goes over the " see all 41 product category", a window opens and if you don't select it will close automatically,
do you know what is the name of this script or the name of this action? or which are keywords to find something about it?
thanks

[jettrue]

hi jettrue
again I come to ask you another question,
because I have too much category and in sideboxes is very horrible figure to get show them , I found in http://www.amazon.com/, above when your mouse goes over the " see all 41 product category", a window opens and if you don't select it will close automatically,
do you know what is the name of this script or the name of this action? or which are keywords to find something about it?
thanks

I'm not really sure, however you may be able to do something similar (but without the fancy expanding and collapsing box) with a CSS popup. You can do a google for CSS popups and see a few examples. I used some here:

www.jmb.jadetrue.com (hover over "Our Newest Additions" and "Important Info".

[jettrue]

hi
well this is what I get after just implementing header css flyout, I did changes in stylsheet.header_menu.css , and in order to get the menu bar goes to right as the site is right to left, I changed div#dropMenu li to float:right.
as I need this header, could you please check my css file and solve this problem, as you can see in the figure (zip file) mouse goes over a menu item, the submenu sping one box to left instead of being onder tjhat menu:
****************

thanks

Change the -12em back to 12em, maybe? If I could see a real site, that would help me greatly.