Solved

How do I use CSS to get an active menu item to have the rounded corner background the same as the hover status?

Posted on 2010-08-26
8
613 Views
Last Modified: 2012-05-10
I need the menu item that is active to be the same as hover status on this joomla site
http://reidsview.com.au/

CSS file attached

Hope someone knows how to fix this I have tried a few things but none worked.

Kind Regards
Robin Custance


/* Copyright (C) 2007 - 2010 YOOtheme GmbH, YOOtheme Proprietary Use License (http://www.yootheme.com/license) */

/*
 * top and footer menu
 */

 
#toolbar ul.menu,
#footer ul.menu {
	display: inline-block;
	margin: 0px;
	padding: 0px;
	list-style: none;
}

#footer ul.menu {
	display: block;
	line-height: 14px;
}

#toolbar .menu li,
#footer .menu li {
	display: inline-block;
	margin: 0px;
	padding: 0px;
}

#toolbar .menu li a,
#footer .menu li a {
	display: inline-block;
	padding: 0px 15px 0px 14px;
	background: url(../images/topmenu_item_bg.png) 0 50% no-repeat;
	overflow: hidden;  
	color: #858586;
}
#footer .menu li a { background-image: url(../images/footermenu_item_bg.png); }

#toolbar .menu a:hover,
#footer .menu a:hover { color: #ffffff; }

#toolbar .menu a.first,
#footer .menu a.first {
	padding-left: 0px;
	background: none;
}

#toolbar .menu a.last,
#footer .menu a.last { padding-right: 0px; }

/*
 * menu
 */

 
#menu ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
	
}

#menu li {
	position: relative;
	margin: 0px;
	padding: 0px;
}

#menu a,
#menu span { display: block; }
#menu a { text-decoration: none; }

 
#menu span.icon {
	background-repeat: no-repeat;
	background-position: 0 50%;
}

 
#menu ul.menu { float: left; }

#menu li.level1 { float: left; }

#menu a.level1,
#menu span.level1 { 
	padding: 0px 20px 0px 20px;
	float: left;
	color:ffffff;
}

#menu a.level1 span.bg,
#menu span.level1 span.bg {
	height: 37px;
	padding: 8px 0px 0px 0px;
	float: left;
	line-height: 40px;
	font-size: 13px;
	margin:0 0 -10 0;
}


#menu a.level1:hover {color:#ffffff;}
 
#menu li.active a.level1 span.bg,
#menu li.active span.level1 span.bg { color: #694610; font-weight: normal; }

#menu li.level1:hover,
#menu li.level1.remain .active { background: url(../images/menu_level1_item.png) 0 10px no-repeat; }

#menu li:hover a.level1,
#menu li:hover span.level1 { background: url(../images/menu_level1_item.png) 100% -40px no-repeat; }

#menu li:hover a.level1 span.bg,
#menu li:hover span.level1 span.bg,
#menu li.remain .level1 span.bg { color:#ffffff; background: url(../images/menu_level1_item.png) 0 -90px repeat-x;}

#menu li.level1.parent:hover,
#menu li.level1.parent.remain { background-position: 0 -150px; }

#menu li.parent:hover a.level1,
#menu li.parent:hover span.level1,
#menu li.parent.remain a.level1,
#menu li.parent.remain span.level1 { background: url(../images/menu_level1_item.png) 100% -200px no-repeat; }

#menu li.parent:hover a.level1 span.bg,
#menu li.parent:hover span.level1 span.bg,
#menu li.parent.remain .level1 span.bg { background: url(../images/menu_level1_item.png) 100% -250px repeat-x; }
 
#menu a.level1 span.title,
#menu span.level1 span.title {
	font-size: 15px;
	line-height: 30px;
}

 
#menu a.level1 span.subtitle,
#menu span.level1 span.subtitle {
	margin-top: -7px;
	font-size: 9px;
	font-weight: normal;
	line-height: 10px;
	text-transform: none;
}

 
#menu .dropdown {
	position: absolute;
	top: 45px;
 	left: -999em;  
	z-index: 100;
	 
}

#menu li:hover .dropdown,
#menu li.remain .dropdown { color: ffffff; left: -4px; }

#menu .dropdown-t1 { }
#menu .dropdown-t2 { }
#menu .dropdown-t3 { }

#menu .dropdown-1 { background: url(../images/menu_dropdown_edges.png) 0 0 repeat-y; }

#menu .dropdown-2 {
	padding: 0px 5px 0px 5px;
	background: url(../images/menu_dropdown_edges.png) 100% 0 repeat-y;
}

#menu .dropdown-3 {
	padding: 7px 0px 7px 0px;
	background: #FFFFFF;
	overflow: hidden;
}

#menu .dropdown-b1 { background: url(../images/menu_dropdown_corners.png) 0 0 no-repeat; }

#menu .dropdown-b2 {
	padding: 0px 5px 0px 5px;
	background: url(../images/menu_dropdown_corners.png) 100% -10px no-repeat;
}

#menu .dropdown-b3 {
	height: 5px;
	background: url(../images/menu_dropdown_corners.png) 0 -20px repeat-x;
}

 
#menu ul.level2 { background: url(../images/menu_level2_line_v.png) 100% 0 repeat-y; }
#menu ul.last { background: none; }

#menu .group-box1 { padding: 0px 7px 0px 7px; }

#menu .hover-box1 { color: ffffff; overflow: hidden; }

#menu a.level2,
#menu span.level2,
#menu a.level2.last.parent,
#menu span.level2.last.parent {
	border-bottom: 1px solid #EDEEEF;
	background: url(../images/menu_level2_item.png) 0 -100px repeat-x;
	overflow: hidden;
}

#menu a.level2:hover,
#menu a.level2:hover.last {
	border-bottom-color: #ffffff;
	background-position: 0 100%;
}

#menu a.level2.last,
#menu span.level2.last { border-bottom: 1px solid #ffffff; }

#menu a.level2 span.bg,
#menu span.level2 span.bg {
	padding-left: 10px;
	line-height: 28px;
	font-size: 12px;
	color: #545557;
}

#menu a.level2:hover span.bg { color:  #3C3D3E; }

 
#menu li.level2 a.current span.bg { font-weight: normal; } 

 
#menu a.level2 span.subtitle,
#menu span.level2 span.subtitle {
	margin-top: -10px;
	font-size: 10px;
	font-weight: normal;
	text-transform: none;
}

 
#menu a.level2 span.icon,
#menu span.level2 span.icon {
	min-height: 45px;
	padding-left: 50px;
	line-height: 45px;
}
#menu a.level2 span.icon span.title,
#menu span.level2 span.icon span.title { line-height: 33px; }
#menu a.level2 span.icon span.subtitle,
#menu span.level2 span.icon span.subtitle { line-height: 12px; }

 
#menu .sub { padding: 5px 0px 10px 0px; }

#menu ul.level3 { padding: 0px 0px 0px 10px; }

#menu a.level3 span.bg,
#menu span.level3 span.bg {
	padding-left: 12px;
	background: url(../images/menu_level3_item.png) 0px 20px no-repeat;
	line-height: 18px;
	font-size: 11px;
	color: #7D7E7F;
}

#menu a.level3.current span.bg { background-position: 0px -23px; }

#menu a.level3:hover span.bg {
	color: #545557;
	background-position: 0px 0px;
}

 
 
 
 

#menu .columns2 ul.level2,
#menu .columns3 ul.level2,
#menu .columns4 ul.level2 { float: left; }

#menu .columns2 ul.level2 {	width: 50%; }

#menu .columns3 ul.level2 { width: 34%; }
#menu .columns3 ul.first,
#menu .columns3 ul.last { width: 33%; }

#menu .columns4 ul.level2 { width: 25%; }

/*
 * sub menus
 */
 
 
div.mod-menu ul {
	margin: 0px;
	padding: 0px;
	overflow: hidden;
	list-style: none;
}

div.mod-menu ul.menu li {
	margin: 0px;
	padding: 0px;
}

div.mod-menu ul.menu a,
div.mod-menu ul.menu span { display: block; }
div.mod-menu ul.menu a { text-decoration: none; }

 
div.mod-menu ul.menu span.icon {
	background-repeat: no-repeat;
	background-position: 5px 50%;
	text-indent: 35px;
}

 
div.mod-menu ul.menu li.parent span.separator { cursor: pointer; }

 
div.mod-menu ul.menu span.subtitle { display: none; }


/*
 * sub menu: mod-line
 */

div.mod-line ul.menu span.bg {
	height: 30px;
	line-height: 30px;
	text-indent: 5px;
	color: #858586;
	font-size: 14px;
}

 
div.mod-line ul.menu a.current span.bg { font-weight: normal; }

 
div.mod-line ul.menu a:hover span.bg,
div.mod-line ul.menu span:hover span.bg { color: #ffffff; }

 
div.mod-line ul.menu a.level1,
div.mod-line ul.menu span.level1 { 
	background: #FFF;
	color:#069;
	overflow: hidden;
}

div.mod-line ul.menu:hover a.level1,
div.mod-line ul.menu:hover span.level1 { 
	background: url(../images/submenu_level1_item.png) 0px 0px repeat-x;
	color: #ffffff;
	overflow: hidden;
}

div.mod-line ul.menu a.level1:hover,
div.mod-line ul.menu span.level1:hover,
div.mod-line ul.menu li.first a.level1:hover,
div.mod-line ul.menu li.first span.level1:hover { color: ffffff; background-position: 0px -35px; }

div.mod-line ul.menu li.parent.active a.level1:hover,
div.mod-line ul.menu li.parent.active span.level1:hover,
div.mod-line ul.menu li.parent.last a.level1:hover,
div.mod-line ul.menu li.parent.last span.level1:hover { color: ffffff; background-position: 0px -70px; }

div.mod-line ul.menu li.parent a.level1 span.bg,
div.mod-line ul.menu li.parent span.level1 span.bg { background: url(../images/submenu_level1_parent.png) 100% 0 no-repeat; }

div.mod-line ul.menu li.parent a.level1.active span.bg,
div.mod-line ul.menu li.parent span.level1.active span.bg { background-position: 100% -30px; }

div.mod-rounded ul.menu li.level1:hover span.bg { color: ffffff; }

div.mod-rounded ul.menu a.current.level1 span.bg  { font-weight: normal; }

 
div.mod-line ul.menu ul.level2 { padding: 0px 10px 10px 10px; }

div.mod-line ul.menu li.level2 { }

div.mod-line ul.menu li.level2 a:hover {color:  #ffffff;}

div.mod-line ul.menu li.level2 span.bg {
	height: 20px;
	line-height: 20px;
	text-indent: 15px;
	font-size: 12px;
	background: url(../images/submenu_level2_item.png) 0px 50px no-repeat;
}
div.mod-line ul.menu li.level2 a:hover span.bg { color: #3C3D3E; }
div.mod-line ul.menu a.level2:hover span.bg { background-position: 0px 0px; }

 
div.mod-line ul.menu a.level3 span.bg { text-indent: 30px; }
div.mod-line ul.menu a.level3:hover span.bg { background-position: 15px 0px; }

 
div.mod-line ul.menu a.level4 span.bg { text-indent: 45px; }
div.mod-line ul.menu a.level4:hover span.bg { background-position: 30px 0px; }

Open in new window

0
Comment
Question by:KoolV
  • 6
8 Comments
 
LVL 4

Expert Comment

by:darkyin87
ID: 33537275
try a:visited
0
 

Author Comment

by:KoolV
ID: 33537771
But it is for a:active that I need it and the background has three parts to it left and right round corners and the centre bit
0
 

Author Comment

by:KoolV
ID: 33541554
This is the css i that file that controls it

#menu a.level1 span.bg,
#menu span.level1 span.bg {
      height: 37px;
      padding: 8px 0px 0px 0px;
      float: left;
      line-height: 40px;
      font-size: 13px;
      margin:0 0 -10 0;
}


#menu a.level1:hover {color:#ffffff;}
 
#menu li.active a.level1 span.bg,
#menu li.active span.level1 span.bg { color: #694610; font-weight: normal; }

#menu li.level1:hover,
#menu li.level1.remain .active { background: url(../images/menu_level1_item.png) 0 10px no-repeat; }

#menu li:hover a.level1,
#menu li:hover span.level1 { background: url(../images/menu_level1_item.png) 100% -40px no-repeat; }

#menu li:hover a.level1 span.bg,
#menu li:hover span.level1 span.bg,
#menu li.remain .level1 span.bg { color:#ffffff; background: url(../images/menu_level1_item.png) 0 -90px repeat-x;}

#menu li.level1.parent:hover,
#menu li.level1.parent.remain { background-position: 0 -150px; }

#menu li.parent:hover a.level1,
#menu li.parent:hover span.level1,
#menu li.parent.remain a.level1,
#menu li.parent.remain span.level1 { background: url(../images/menu_level1_item.png) 100% -200px no-repeat; }

#menu li.parent:hover a.level1 span.bg,
#menu li.parent:hover span.level1 span.bg,
#menu li.parent.remain .level1 span.bg { background: url(../images/menu_level1_item.png) 100% -250px repeat-x; }
0
 
LVL 4

Expert Comment

by:Morrisproject
ID: 33543141
the site is in offline mode so i cannot view

I guess it would be something like
#menu li.level1:hover,
#menu li.level1.remain .active { background: url(../images/menu_level1_item.png) 0 10px no-repeat; }

changing to:
#menu li.level1:hover, #menu li.level1:active,
#menu li.level1.remain .active { background: url(../images/menu_level1_item.png) 0 10px no-repeat; }

0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:KoolV
ID: 33544149
If I change the following code


#menu li.active a.level1 span.bg,
#menu li.active span.level1 span.bg { color: #694610; font-weight: normal; }

#menu li.level1:hover,
#menu li.level1.remain .active { background: url(../images/menu_level1_item.png) 0 10px no-repeat; }

#menu li:hover a.level1,
#menu li:hover span.level1 { background: url(../images/menu_level1_item.png) 100% -40px no-repeat; }

#menu li:hover a.level1 span.bg,
#menu li:hover span.level1 span.bg,
#menu li.remain .level1 span.bg { color:#ffffff; background: url(../images/menu_level1_item.png) 0 -90px repeat-x;}



To This code

#menu li.active a.level1 span.bg,
#menu li.active span.level1 span.bg { color: #ffffff; font-weight: normal; }

#menu li.level1:hover,
#menu li.active a.level1,
#menu li.level1.remain .active { background: url(../images/menu_level1_item.png) 0 10px no-repeat; }

#menu li:hover a.level1,
#menu li:hover span.level1 .active { background: url(../images/menu_level1_item.png) 100% -40px no-repeat; }

#menu li:hover a.level1 span.bg,
#menu li:hover span.level1 span.bg,
#menu li.remain .level1 span.bg .active { color:#ffffff; background: url(../images/menu_level1_item.png) 0 -90px repeat-x;}

I get the result in image 1

If I change it to this code


#menu li.active a.level1 span.bg,
#menu li.active span.level1 span.bg { color: #ffffff; font-weight: normal; }

#menu li.level1:hover,
#menu li.active a.level1,
#menu li.level1.remain .active { background: url(../images/menu_level1_item.png) 0 10px no-repeat; }

#menu li:hover a.level1,
#menu li.active a.level1,
#menu li:hover span.level1 .active { background: url(../images/menu_level1_item.png) 100% -40px no-repeat; }

#menu li:hover a.level1 span.bg,
#menu li:hover span.level1 span.bg,
#menu li.active a.level1,
#menu li.remain .level1 span.bg .active { color:#ffffff; background: url(../images/menu_level1_item.png) 0 -90px repeat-x;}


I get the result in image 2


If I change it to

#menu li.active a.level1 span.bg,
#menu li.active span.level1 span.bg { color: #ffffff; font-weight: normal; }

#menu li.level1:hover,
#menu li.active a.level1,
#menu li.level1.remain .active { background: url(../images/menu_level1_item.png) 0 10px no-repeat; }

#menu li:hover a.level1,
#menu li.active a.level1,
#menu li:hover span.level1 .active { background: url(../images/menu_level1_item.png) 100% -40px no-repeat; }

#menu li:hover a.level1 span.bg,
#menu li:hover span.level1 span.bg,
#menu li.active a.level1,
#menu li.remain .level1 span.bg .active { color:#ffffff; background: url(../images/menu_level1_item.png) 0 -90px repeat-x;}

I get the result in image 3
Screen-shot-2010-08-28-at-2.28.1.png
Screen-shot-2010-08-28-at-2.31.0.png
Screen-shot-2010-08-28-at-2.32.0.png
0
 

Assisted Solution

by:KoolV
KoolV earned 0 total points
ID: 33544173
I think the square corners look better but the client wants rounded corners
0
 

Accepted Solution

by:
KoolV earned 0 total points
ID: 33715406
Never did work this out the client accepted it as I have it now http://www.reidsview.com.au
0
 

Author Closing Comment

by:KoolV
ID: 34221379
Did not end up finding a solution
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

895 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now