Дополнительные меню - Joomla 1.5: Вопросы по работе с меню

/*---------------------------------------------------------------- 
  Copyright:
  Copyright (C) 2008 IceTheme. All Rights Reserved
  
  License:
  Copyrighted Commercial Software 
  
  Author:
  IceTheme - http://wwww.icetheme.com
---------------------------------------------------------------- */

		
/*---------------
 Main Nav
----------------*/
#main-nav{
	height:56px;
	margin:0;
	width:970px;
	position:relative;
	overflow:visible;
	clear:both;
	background-repeat:no-repeat;
	background-position:left;}


	/* main menu ul or ol elment */
	ul#nav{
		display:block;
		position: absolute;
		list-style:none;
		margin:0 0 0 10px;
		z-index:5;
		top:0;
		left:0;
		display:block;}
		
		/* List items in main menu --[for non-javascript users this applies to submenus as well]  */
			ul#nav li { 
				background:url(../images/nav_border.png) no-repeat center right;
				display:block;
				list-style:none;
				position:relative;
				float:left;}
		
				ul#nav li a, 
				#MainMenuSub a{
					text-decoration:none;
					display:block;
					padding:5px 20px;}

				/* Just main menu links --[for non-javascript users this applies to submenu links as well]*/
				ul#nav li a{
					margin:0;
					float:left;
					color:#fff;
					text-decoration:none;
					display:block;
					font-size:1.3em;
					font-family:Georgia, "Times New Roman", Times, serif;
					padding:0 18px 9px;}
					ul#nav li a span {
						padding-top:9px;
						display:block;}
						ul#nav li li a span { display:inline; padding-top:0}
						ul#nav li a span.sub { 
							display:block;
							font-size:.7em;
							padding-top:0;
							font-family:Arial, Helvetica, sans-serif;
							font-weight:normal; 
							margin-top:3px;
							color:#86B9DA;
							letter-spacing:normal}
							ul#nav li li a span.sub { display:inline; font-size:1em; margin-top:0;}
								ul#nav li li a:hover span.sub { color:#fff}


				/* All menu links on hover or focus */
				ul#nav li a:hover, ul#nav li a:focus, 
				#MainMenuSub a:hover, #MainMenuSub a:focus, 
				ul#nav a.mainMenuParentBtnFocused, #MainMenuSub a.subMenuParentBtnFocused{
					background:url(../images/nav_hover.png) repeat-x bottom ;
					color:#FFF;}

				/* sub menu links on hover or focus */
				ul#nav li li a:hover, #nav li a:focus,
				#MainMenuSub li a:hover, #MainMenuSub  li a:focus, 
				#nav a.mainMenuParentBtnFocused, #MainMenuSub a.subMenuParentBtnFocused{
					background-image:none;
					color:#FFF;}



/* ----[ OLs ULs, LIs, and DIVs ]----*/

/* Submenu Outer Wrapper - each submenu is inside a div with this class - javascript users only */
.smOW{ 
	display:none; 
	position: absolute; 
	overflow:hidden; 
	/*the 2px left & right padding lets you have a 1px border 
	  on the ul or ol inside since overflow is set to hidden*/
	padding:0 2px;
	margin:0 0 0 -1px;}


/* All ULs and OLs */
ul#nav ul, ul#nav ol, 
#MainMenuSub ul, #MainMenuSub ol { 
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1em;}
	ul#nav {
		list-style: none; 
		line-height: 1em; 
		padding:0;}
	
	

	/* All submenu OLs and ULs */
	ul#nav ul, 
	#MainMenuSub ul {	
		left:0;
		border-right-width:1px;
		border-right-style:solid;}
		ul#nav ul li a, 
		#MainMenuSub ul li a { 
			padding:0 40px 0 15px; 
			height:30px; 
			line-height:31px;
			border-bottom-width:1px;
			border-bottom-style:solid;}
	
	

	#MainMenuSub li.parent a { 
		background:url(../images/nav_drop_arrow.png) no-repeat 96% 55%;}
		#MainMenuSub li.parent a:hover { 
			background-image:url(../images/nav_drop_arrow_hover.png) }
		
		#MainMenuSub li:hover {}
		
		
		/* When the parent item is set to current or active */
		ul#nav  li#current a,
		ul#nav  li.active a {
			color:#fff;
			background:url(../images/nav_current.png) no-repeat bottom}

			#MainMenuSub li#current a,
			#MainMenuSub li.active a  { color:#fff!important}

					
					

#MainMenuSub {	
	display:block; 	
	position:absolute;	
	top:0;	
	left:0;	
	width:100%;
	height:0;	
	overflow:visible;	
	z-index:1000000000; }
#MainMenuSub li{ list-style: none;}
				


/* --------------------------[ The below is just for non-javscript users ]--------------------------*/
#nav li li{	float:none; }

#nav li li a{ /* Just submenu links*/	
	position:relative;
	float:none;
	font-size:1em;}

#nav li ul { /* second-level lists */
	position: absolute;
	width: 18em;
	margin-left: -1000em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
	margin-top:45px;
}

/* third-and-above-level lists */
#nav li ul ul { margin: -1em 0 0 -1000em; }
#nav li:hover ul ul {	margin-left: -1000em; }

 /* lists nested under hovered list items */
#nav li:hover ul{	margin-left: 0; }
#nav li li:hover ul {	margin-left: 18em; margin-top:-2.5em;}

/* extra positioning rules for limited noscript keyboard accessibility */
#nav li a:focus + ul {  margin-left: 0; margin-top:45px }
#nav li li a:focus + ul { left:0; margin-left: 1010em; margin-top:-2.2em;}
#nav li li a:focus {left:0;  margin-left:1000em; width:18em;  margin-top:0;}
#nav li li li a:focus {left:0; margin-left: 2010em; width: 18em;  margin-top:-1em;}
#nav li:hover a:focus{ margin-left: 0; }
#nav li li:hover a:focus + ul { margin-left: 18em; }


/*===========================///////////////////-===========================
								  OtherMenu
*===========================///////////////////-==========================*/

#othermenu_wrap{
	clear:both;
	padding:0;
	margin-left:-2px;
	position:relative;
	overflow:visible;}
	
	/* main menu ul or ol elment */
	ul#othermenu {
		display:block;
		position: absolute;
		list-style:none;
		margin:0;
		z-index:5;
		top:0;
		left:0;
		display:block;}
		
		/* List items in main menu --[for non-javascript users this applies to submenus as well]  */
		ul#othermenu li { 
			display:block;
			list-style:none;
			position:relative;
			float:left;}
			
			#OtherMenuSub{	
				display:block; 	
				position:absolute;	
				top:0;	
				left:0;	
				width:100%;	
				height:0;	
				overflow:visible;	
				z-index:1000000000; }				
				#OtherMenuSub li{	
					list-style: none;}
			
				ul#othermenu li a,
				#OtherMenuSub a{
					text-decoration:none;
					display:block;
					width:182px;
					font-size:1em;
					letter-spacing:0.05em;
					background: url(../images/othermenu_line.png) no-repeat bottom left;
					color:#909090;
					text-transform:uppercase;
					padding:0 0 0 1px;
					height:30px;
					margin-top:-1px;
					line-height:30px;}					
					ul#othermenu li a:hover{
						color:#333;
						background-position:bottom left;}
								
								#OtherMenuSub a:hover{ background-image:none}
						
					ul#othermenu li#current a,
					ul#othermenu li.active a,
					#OtherMenuSub li#current a {
							color:#333}
							ul#othermenu  ul li#current a,
							ul#othermenu ul li.active a,
							#OtherMenuSub ul li#current a { background-image:none}
					
						ul#othermenu li a span{
							display:block;}
								
						
					/* Just sub menu links */
									
					ul#othermenu li li {
						width:auto}
					#OtherMenuSub a, 
					ul#othermenu li li a{
						text-align:left;
						text-transform:none;
						font-size:1em;
						background-image:none;
						width:auto;
						border-bottom:1px solid #E1E1D7;
						letter-spacing:normal;}
						ul#othermenu li a:hover,
						#OtherMenuSub a:hover {
							color:#333;}
						
						
						#OtherMenuSub a {
							padding:0 40px 0 20px;}

						/* Parent Main Menu Links ---[javascript users only]*/
					
							ul#othermenu  li.parent a span,					
							#OtherMenuSub li.parent a { 
							background: url(../images/othermenu_arrow_parent.png) 95% 55% no-repeat;}
								ul#othermenu  li.parent a:hover span,
								#OtherMenuSub li.parent a:hover  { 
									background-image:url(../images/othermenu_arrow_parent_hover.png) }
								
								ul#othermenu  li.parent li a span,					
								#OtherMenuSub li.parent li a { 
								background: url(../images/othermenu_arrow_parent_2.png) 95% 55% no-repeat;}
									ul#othermenu  li.parent li a:hover span,					
									#OtherMenuSub li.parent li a:hover { 
										background-image:url(../images/othermenu_arrow_parent_2_hover.png) }
								
									
						
							
/* ----[ OLs ULs, LIs, and DIVs ]----*/

/* All submenu OLs and ULs */
ul#othermenu ol, ul#othermenu ul, #OtherMenuSub ul, #OtherMenuSub ol {	
	/*border around submenu goes here*/
	border:1px solid #E1E1D7;
	border-bottom:none;
	left:0;
	background:#F6F4F2}

/* All ULs and OLs */
ul#othermenu, ul#othermenu ul, ul#othermenu ol, #OtherMenuSub ul, #OtherMenuSub ol { 
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1em;
}



/* --------------------------[ The below is just for non-javscript users ]--------------------------*/

ul#othermenu li li{	float:none; }

ul#othermenu li li a{ /* Just submenu links*/	
	position:relative;
	float:none;
}

ul#othermenu li ul { /* second-level lists */
	position: absolute;
	width: 10em;
	z-index:999999;
	overflow:visible;
	visibility:visible;
	margin-left: -1000em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}

/* third-and-above-level lists */
ul#othermenu li ul ul { margin: -1em 0 0 -1000em; }
ul#othermenu li:hover ul ul {	margin-left: -1000em; }

 /* lists nested under hovered list items */
ul#othermenu li:hover ul{	margin-left: 186px; margin-top:-2.5em;}
ul#othermenu li li:hover ul {	margin-left: 10em; }

/* extra positioning rules for limited noscript keyboard accessibility */
ul#othermenu li a:focus + ul {  margin-left: 186px; margin-top:-2.5em; }
ul#othermenu li li a:focus + ul { left:186px; margin-left: 1010em; margin-top:-2.5em;}
ul#othermenu li li a:focus {left:186px;  margin-left:1000em; width:10em;  margin-top:-2.5em;}
ul#othermenu li li li a:focus {left:186px; margin-left: 2010em; width: 10em;  margin-top:-2.5em;}
ul#othermenu li:hover a:focus{ margin-left: 0; }
ul#othermenu li li:hover a:focus + ul { margin-left: 10em; }
							
/*===========================///////////////////-===========================
					            Top Menu
===========================///////////////////-===========================*/
ul#topmenu {
	margin:3px 0 0 6px;
	float:left;}
	ul#topmenu li{
		list-style-type:none;
		display:inline;
		margin:0;
		border-right:1px solid #C7C7C7}
		ul#topmenu li a{
			font-size:1em;
			margin:0 7px;
			font-size:.9em;
			color:#1F648F;}
			ul#topmenu li a:hover{}
				ul#topmenu li a span {}
						ul#topmenu li a:hover span {}


/*===========================///////////////////-===========================
					            Footer Links
===========================///////////////////-===========================*/

ul#footerlinks {
	float:left;
	width:100%;
	margin:0 auto;
	position:relative;
	overflow:hidden;
	text-align:center;
	padding:0 0 12px;
	margin:0 0 12px;
	border-bottom:1px dashed #B2B2B2}
	ul#footerlinks li{
		list-style-type:none;
		display:inline;
		margin:0 0 0 15px;
		border-right:1px dotted #A6A6A6}
		ul#footerlinks li a{
			margin-right:15px;
			font-size:1em;
			letter-spacing:0.05em;
			text-transform:uppercase;
			color:#888;}
			ul#footerlinks li a:hover{
				color:#222;
				text-decoration:none;}
			 	ul#footerlinks li#current a { color:#222}
				
/*===========================///////////////////-===========================
					            Footer Menu
===========================///////////////////-===========================*/
ul#footermenu {
		float:right;
		margin:0 50px 0 0; }
		ul#footermenu li{
			list-style-type:none;
			float:left;
			margin:0 0 0 10px;}
			ul#footermenu li a{	margin-right:10px;}

/*===========================///////////////////-===========================
		              Слуховые Аппараты
*===========================///////////////////-==========================*/

#sluhmenu_wrap{
	clear:both;
	padding:0;
	margin-left:-2px;
	position:relative;
	overflow:visible;}

	/* main menu ul or ol elment */
	ul#sluhmenu {
		display:block;
		position: absolute;
		list-style:none;
		margin:0;
		z-index:5;
		top:0;
		left:0;
		display:block;}

		/* List items in main menu --[for non-javascript users this applies to submenus as well]  */
		ul#sluhmenu li {
			display:block;
			list-style:none;
			position:relative;
			float:left;}

			#SluhMenuSub{
				display:block;
				position:absolute;
				top:0;
				left:0;
				width:100%;
				height:0;
				overflow:visible;
				z-index:1000000000; }
				#SluhMenuSub li{
					list-style: none;}

				ul#sluhmenu li a,
				#SluhMenuSub a{
					text-decoration:none;
					display:block;
					width:182px;
					font-size:1em;
					letter-spacing:0.05em;
					background: url(../images/othermenu_line.png) no-repeat bottom left;
					color:#909090;
					text-transform:uppercase;
					padding:0 0 0 1px;
					height:30px;
					margin-top:-1px;
					line-height:30px;}
					ul#sluhmenu li a:hover{
						color:#333;
						background-position:bottom left;}

								#SluhMenuSub a:hover{ background-image:none}

					ul#sluhmenu li#current a,
					ul#sluhmenu li.active a,
					#SluhMenuSub li#current a {
							color:#333}
							ul#sluhmenu  ul li#current a,
							ul#sluhmenu ul li.active a,
							#SluhMenuSub ul li#current a { background-image:none}

						ul#sluhmenu li a span{
							display:block;}


					/* Just sub menu links */

					ul#sluhmenu li li {
						width:auto}
					#SluhMenuSub a,
					ul#sluhmenu li li a{
						text-align:left;
						text-transform:none;
						font-size:1em;
						background-image:none;
						width:auto;
						border-bottom:1px solid #E1E1D7;
						letter-spacing:normal;}
						ul#sluhmenu li a:hover,
						#SluhMenuSub a:hover {
							color:#333;}


						#SluhMenuSub a {
							padding:0 40px 0 20px;}

						/* Parent Main Menu Links ---[javascript users only]*/

							ul#sluhmenu  li.parent a span,
							#SluhMenuSub li.parent a {
							background: url(../images/othermenu_arrow_parent.png) 95% 55% no-repeat;}
								ul#sluhmenu  li.parent a:hover span,
								#SluhMenuSub li.parent a:hover  {
									background-image:url(../images/othermenu_arrow_parent_hover.png) }

								ul#sluhmenu  li.parent li a span,
								#SluhMenuSub li.parent li a {
								background: url(../images/othermenu_arrow_parent_2.png) 95% 55% no-repeat;}
									ul#sluhmenu  li.parent li a:hover span,
									#SluhMenuSub li.parent li a:hover {
										background-image:url(../images/othermenu_arrow_parent_2_hover.png) }




/* ----[ OLs ULs, LIs, and DIVs ]----*/

/* All submenu OLs and ULs */
ul#sluhmenu ol, ul#sluhmenu ul, #SluhMenuSub ul, #SluhMenuSub ol {
	/*border around submenu goes here*/
	border:1px solid #E1E1D7;
	border-bottom:none;
	left:0;
	background:#F6F4F2}

/* All ULs and OLs */
ul#sluhmenu, ul#sluhmenu ul, ul#sluhmenu ol, #SluhMenuSub ul, #SluhMenuSub ol {
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1em;
}



/* --------------------------[ The below is just for non-javscript users ]--------------------------*/

ul#sluhmenu li li{	float:none; }

ul#sluhmenu li li a{ /* Just submenu links*/
	position:relative;
	float:none;
}

ul#sluhmenu li ul { /* second-level lists */
	position: absolute;
	width: 10em;
	z-index:999999;
	overflow:visible;
	visibility:visible;
	margin-left: -1000em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}

/* third-and-above-level lists */
ul#sluhmenu li ul ul { margin: -1em 0 0 -1000em; }
ul#sluhmenu li:hover ul ul {	margin-left: -1000em; }

 /* lists nested under hovered list items */
ul#sluhmenu li:hover ul{	margin-left: 186px; margin-top:-2.5em;}
ul#sluhmenu li li:hover ul {	margin-left: 10em; }

/* extra positioning rules for limited noscript keyboard accessibility */
ul#sluhmenu li a:focus + ul {  margin-left: 186px; margin-top:-2.5em; }
ul#sluhmenu li li a:focus + ul { left:186px; margin-left: 1010em; margin-top:-2.5em;}
ul#sluhmenu li li a:focus {left:186px;  margin-left:1000em; width:10em;  margin-top:-2.5em;}
ul#sluhmenu li li li a:focus {left:186px; margin-left: 2010em; width: 10em;  margin-top:-2.5em;}
ul#sluhmenu li:hover a:focus{ margin-left: 0; }
ul#sluhmenu li li:hover a:focus + ul { margin-left: 10em; }