?
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
Medium Priority
?
629 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

Question has a verified solution.

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

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses
Course of the Month8 days, 3 hours left to enroll

616 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