• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 511
  • Last Modified:

Transparent background on a list/menu item

Experts,

Im trying to modify a css drop down menu to match a design (see attached image).

I am very close at the moment, but having slight difficulty with making the dropdown background transparent (im happy if this only works in modern browsers, and is solid color in older ones).

If you could spare a moment to look at the menu on this site and recommend how i might achieve the desired transparency effect i would appreciate it.

www.mygolfbook.co.uk/menu.html

As you can see, I have two override classes that i apply to the main menu item and the sub item. I have played around with adding:

opacity:0.4;filter:alpha(opacity=40);

To the sub-override class but it seems to fade the text not the background. I also tried adding a transparent png as the backgroun but this also failed.

Any advice would be appreciated.

Regards
Easynow
menu-grab.jpg
0
Dean OBrien
Asked:
Dean OBrien
2 Solutions
 
LZ1Commented:
The easiest way to do this and most compliant honestly is to have make a transparent background image.  Make a 1px by 1px image with your color and then set the opacity.  

Then set that image in your background on the ul.pureCssMenu, ul.pureCssMenu ul elements in CSS.

If you need a BG image made, let us know.
0
 
Schells_Web_DesignCommented:
What if you change lines 33, 104 & 113 (on your source code) to this:

background-color:#031d57;alpha(opacity=50);




0
 
remorinaCommented:
Hi easynow111,
With opacity, when you set a parent element's opacity it affects all its descendents, that's why if you set the opacity to the UL the text would also be affected.

The only way I was able to solve this when similar situations arise is by creating an additional layer to act as a background then set its opacity to the desired value and place the other elements on top of it.

Try your modified code below, I have only modified it to show how this can be achieved but you might still need to make some further adjustments.

Cheers!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

</head><body bgcolor="orange">
<style>
.main-override{

	border-left-style:solid;
	border-left-color:#f7a045;
	border-left-width:4px;
	border-right-style:solid;
	border-right-color:#fff;
	border-right-width:8px;
	min-width:120px;
}
.sub-override{

	border-left-style:solid;
	border-left-color:#f7a045;
	border-left-width:4px;
	background-url:('sub-back.png');
	/* background-color:#031d57;*/
	width:252px;
}
#pcm{display:none;}
ul.pureCssMenu ul{display:none}
ul.pureCssMenu li:hover ul{display:block}
ul.pureCssMenu li:hover > .subMenu{display:block;}
ul.pureCssMenu li:hover > .subMenu .trans {width:100%;height:100%;position:absolute;left:4px;background:#031d57;opacity:0.5;filter: alpha(opacity = 50);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";z-index:10;}

/* ul.pureCssMenu ul{position: absolute;left:-4px;top:98%;} */
ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}
ul.pureCssMenu {background-color:#031d57;}
ul.pureCssMenu,ul.pureCssMenu ul {
	margin:0px;
	list-style:none;
	padding:0px 0px 0px 0px;
	background-repeat:repeat;
	border-color:#A6A6A6;
	border-width:0px;
	border-style:solid;
}
ul.pureCssMenu table {border-collapse:collapse}
ul.pureCssMenu {
	display:block;
	zoom:1;
	float: left;
}
ul.pureCssMenu div{
	min-width:118.65px;
	position:absolute;
	left:-4px;
}
ul.pureCssMenu li{
	display:block;
	margin:0px 0px 0px 0px;
	font-size:0px;
}
ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
outline-style:none;
}
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
	display:block;
	vertical-align:middle;

	border-width:0px;
	border-color:#FCEEB0;
	border-style:solid;
	text-align:left;
	text-decoration:none;
	padding:5px;
	_padding-left:0;
	font:bold 11px Arial;
	color: #ffffff;
	text-decoration:none;
	cursor:pointer;
}
ul.pureCssMenu span{
	overflow:hidden;
}
ul.pureCssMenu li {
	float:left;
}
ul.pureCssMenu ul li {
	float:none;
}
ul.pureCssMenu ul a {
	text-align:left;
	white-space:nowrap;
}
ul.pureCssMenu li.sep{
	text-align:left;
	padding:0px;
	line-height:0;
	height:100%;
}
ul.pureCssMenu li.sep span{
	float:none;	padding-right:0;
	width:3;
	height:100%;
	display:inline-block;
	background-color:#A6A6A6;	background-image:none;}
ul.pureCssMenu ul li.sep span{
	width:100%;
	height:3;
}
ul.pureCssMenu li:hover{
	position:relative;
}
ul.pureCssMenu li:hover>a{
	background-color:#031d57;
	border-color:#4C99AB;
	border-style:solid;
	font:bold 11px Arial;
	color: #f7a045;
	text-decoration:none;
}
ul.pureCssMenu li a:hover{
	position:relative;
	background-color:#031d57;
	border-color:#f00;
	border-style:solid;
	font:bold 11px Arial;
	color: #f7a045;
	text-decoration:none;
}
ul.pureCssMenu li.dis a {
	color: #AAAAAA !important;
}
ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:5px;width:16px;
height:16px;
}
ul.pureCssMenu ul img {width:16px;
height:16px;
}
ul.pureCssMenu img.over{display:none}
ul.pureCssMenu li.dis a:hover img.over{display:none !important}
ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
ul.pureCssMenu li:hover > a img.def  {display:none}
ul.pureCssMenu li:hover > a img.over {display:inline}
ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over{display:inline}
ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def{display:none}
ul.pureCssMenu a:hover ul{display:block}
ul.pureCssMenu span{
	display:block;
	background-image:url(./images/arrv_blue_2.gif);
	background-position:right center;
	background-repeat: no-repeat;
   padding-right:8px;}
ul.pureCssMenu li:hover>a>span{	background-image:url(./images/arrv_white_2.gif);
}
ul.pureCssMenu a:hover span{	_background-image:url(./images/arrv_white_2.gif)}
ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{background-image:url(./images/arr_blue_2.gif)}
ul.pureCssMenu ul li:hover > a span{	background-image:url(./images/arr_white_2.gif);}
ul.pureCssMenu table a:hover span{background-image:url(./images/arr_white_2.gif)}
ul.pureCssMenu li a.pureCssMenui0{
font:n;
}
ul.pureCssMenu li a.pureCssMenui0:hover{
font:o;
}

ul.pureCssMenum {position:relative;z-index:99;}


</style>
<!-- End PureCSSMenu.com STYLE -->



<!-- Start PureCSSMenu.com MENU -->
<ul class="pureCssMenu">
	<li class="pureCssMenui0 main-override"><a class="pureCssMenui0" href="#">home</a></li>
	<li class="pureCssMenui0 main-override"><a class="pureCssMenui0" href="#"><span>about us</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
	<div class="subMenu">
	    <div class="trans">&#160;</div>
	        <ul class="pureCssMenum">
		        <li class="pureCssMenui sub-override"><a class="pureCssMenui" href="#">corporate details</a></li>
		        <li class="pureCssMenui sub-override"><a class="pureCssMenui" href="#">team profiles</a></li>
	        </ul>
	    </div>
	<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
	<li class="pureCssMenui0 main-override"><a class="pureCssMenui0" href="#"><span>services</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
	<div class="subMenu">
	    <div class="trans">&#160;</div>
	    <ul class="pureCssMenum">
		    <li class="pureCssMenui sub-override"><a class="pureCssMenui" href="#">resedential / commercial surveys</a></li>
		    <li class="pureCssMenui sub-override"><a class="pureCssMenui" href="#">cdm</a></li>
		    <li class="pureCssMenui sub-override"><a class="pureCssMenui" href="#">contract / project administration</a></li>
		    <li class="pureCssMenui sub-override"><a class="pureCssMenui" href="#">defect &amp; repair diagnosis</a></li>
		    <li class="pureCssMenui sub-override"><a class="pureCssMenui" href="#">dilapidations</a></li>
		    <li class="pureCssMenui sub-override"><a class="pureCssMenui" href="#">expert witness</a></li>
		    <li class="pureCssMenui sub-override"><a class="pureCssMenui" href="#">party wall matters</a></li>
		    <li class="pureCssMenui sub-override"><a class="pureCssMenui" href="#">planned maintenance</a></li>
		    <li class="pureCssMenui sub-override"><a class="pureCssMenui" href="#">feasibility &amp; costing planning</a></li>
		    <li class="pureCssMenui sub-override"><a class="pureCssMenui" href="#">license for alterations</a></li>
		    <li class="pureCssMenui sub-override"><a class="pureCssMenui" href="#">development monitoring</a></li>
		    <li class="pureCssMenui sub-override"><a class="pureCssMenui" href="#">statutory approvals</a></li>
	    </ul>
	</div>
	<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
	<li class="pureCssMenui0 main-override"><a class="pureCssMenui0" href="#">news</a></li>
	<li class="pureCssMenui0 main-override"><a class="pureCssMenui0" href="#">testimonials</a></li>
	<li class="pureCssMenui0 main-override"><a class="pureCssMenui0" href="#">links</a></li>
	<li class="pureCssMenui0 main-override"><a class="pureCssMenui0" href="#">contact us</a></li>
</ul>
<br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
 </body></html>

Open in new window

0
 
Dean OBrienAuthor Commented:
Thanks guys, I went with LZ1s suggestion and it worked fine (i had originally tried this but was adding it to the wrong classes).

Schells, I had tried setting opacity but as i mentioned it was cascading and giving an undesired effect on the font.

Remorina - Thanks for the code, i tired it out and it seemed to work great, but i had already implemented the first solution.

Thanks to all

Easynow
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now