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
619 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
[Live Webinar] The Cloud Skills Gap

As Cloud technologies come of age, business leaders grapple with the impact it has on their team's skills and the gap associated with the use of a cloud platform.

Join experts from 451 Research and Concerto Cloud Services on July 27th where we will examine fact and fiction.

 
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
 

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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
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.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

623 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