Cherry Zen Template Support Thread

[gsdcypher]

Hi Jettrue,

Thanks! This setting seemed to do the trick and far as getting the menu lined up. And I changed the border to 0 solid to keep the lines from sticking out. :-)

div#nav-cat {width: 150px; margin: -1px 0 0 2px;
background-color: transparent; font-weight:bold;
text-align: center;
line-height: 23px;

}
div#nav-cat ul {margin: 0; padding: 0; padding-top: 0; width: 150px; background-color: transparent;
border: 0 solid #EBE9ED;
background-repeat: no-repeat;
}

BUT.... here is a small gap between the 1 cat and the 2nd sub cat menu that flys out. And when you move your mouse over than gap the menu cuts out...

How do I close that gap to make it a smooth transition without the menu cutting out?

Thanks.

[jettrue]

Hi Jettrue,

Thanks! This setting seemed to do the trick and far as getting the menu lined up. And I changed the border to 0 solid to keep the lines from sticking out. :-)

div#nav-cat {width: 150px; margin: -1px 0 0 2px;
background-color: transparent; font-weight:bold;
text-align: center;
line-height: 23px;

}
div#nav-cat ul {margin: 0; padding: 0; padding-top: 0; width: 150px; background-color: transparent;
border: 0 solid #EBE9ED;
background-repeat: no-repeat;
}

BUT.... here is a small gap between the 1 cat and the 2nd sub cat menu that flys out. And when you move your mouse over than gap the menu cuts out...

How do I close that gap to make it a smooth transition without the menu cutting out?

Thanks.

Try this chunk of css (replaces the entire css file):

body  {
behavior: url(./csshover.htc);
/* WinIE behavior call */}

div#nav-cat {width: 150px; margin: -1px 0 0 2px;
	background-color: transparent; font-weight:bold;
	text-align: center;
	line-height: 23px;
	}
	
div#nav-cat ul {
	margin: 0; 
	padding: 0; 
	padding-top: 0; 
	width: 150px; 
	background-color: transparent;
	border: 0;
	background-repeat: no-repeat;
	}

div#nav-cat ul.level2 {
	margin: 0 0 0 -2px; 
	padding: 0; 
	width: 150px; 
	border: none;
	}
	
div#nav-cat ul.level2, div#nav-cat ul.level3, div#nav-cat ul.level4, div#nav-cat ul.level5, div#nav-cat ul.level6, div#nav-cat li.submenu, div#nav-cat li.submenu:hover, div#nav-cat ul {
	background-color: transparent; 
	}
	
div#nav-cat li {
	background-image: url(../images/b1.gif); 
	position: relative;
	list-style: none; 
	margin: 0px;
	margin-top: 6px;
	z-index: 20; 
	height: 23px;
	width: 150px;
   /* change it to whatever space you want to put space between buttons*/
   }

div#nav-cat li li {
	margin: 0px; /* this overrides the margin-top in the declaration above */
	} 
	
div#nav-cat li:hover {
	background-image: url(../images/b1_over.gif); 
	}

div#nav-cat li a {
	display: block; 
	padding: 0.25em 0 0.25em 0.5em;
	text-decoration: none; width: 150px;
	/*border-left: 0.5em solid #BBB;
	div#nav li a:hover {border-left-color: red;*/
	}

div#nav li a:hover {
	border: none;
	}
	
div#nav-cat>ul a {
	width: 150px;
	}
	
div#nav-cat ul ul {
	position: absolute; 
	top: 0; left: 152px;
	display: none;
	}
	
div#nav-cat ul.level1 li.submenu:hover ul.level2, 
div#nav-cat ul.level2 li.submenu:hover ul.level3,
div#nav-cat ul.level3 li.submenu:hover ul.level4,
div#nav-cat ul.level4 li.submenu:hover ul.level5,
div#nav-cat ul.level5 li.submenu:hover ul.level6 {display:block;}