Solved

How to create a transparent dropdown list without effecting the text and image using CSS

Posted on 2013-01-30
9
366 Views
Last Modified: 2013-01-30
I have a dropdown list that i would like to make transparent but I don't want it to effect the image and text in the list. I tried using

	opacity:0.6;
	filter:alpha(opacity=60); /* For IE8 and earlier */

Open in new window


but it make everything transparent.

Code is below

 <li>
                <a href="#">Assets</a>

                <ul class="subnav">
                    <li><a href="add_asset.php"><img src="images/navigation/add_asset.png" width='40' height='40' align='middle'/><br> Add Asset</a></li>
                    <li><a href="index.php?view=deploy"><img src="images/navigation/computer_deploy.png" width='40' height='40' align='middle'/><br> Assets Ready for Deployment</a></li>
                    <li><a href="index.php?view=restore"><img src="images/navigation/computer_restore.png" width='40' height='40' align='middle'/><br> Assets Needing to be Restored</a></li>
                    <li><a href="index.php?view=development"><img src="images/navigation/computer_development.png" width='40' height='40' align='middle'/><br> Development Machines</a></li>
                    <li><a href="index.php?view=unasigned"><img src="images/navigation/computer_unasigned.png" width='40' height='40' align='middle'/><br> Unasigned Assets</a></li>

                </ul>
            </li>

Open in new window


CSS

/*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
	list-style: none;
	position: absolute;
	left: 0; top: 35px;
	background: #333;
	margin: 0; padding: 0;
	display: none;
	float: left;
	width: 170px;
	-webkit-border-bottom-right-radius: 05px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-bottomright: 05px;
	-moz-border-radius-bottomleft: 5px;
	border-bottom-right-radius: 05px;
	border-bottom-left-radius: 5px;
	border: 1px solid #111;
	z-index:2;
	opacity:0.6;
	filter:alpha(opacity=60); /* For IE8 and earlier */
}
ul.topnav li ul.subnav li{
	margin: 0; padding: 0;
	border-top: 1px solid #252525; 
	border-bottom: 1px solid #444; 
	clear: both;
	width: 170px;
	-webkit-border-bottom-right-radius: 05px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-bottomright: 05px;
	-moz-border-radius-bottomleft: 5px;
	border-bottom-right-radius: 05px;
	border-bottom-left-radius: 5px;
	z-index:2;
}

Open in new window

0
Comment
Question by:ats2012
  • 4
  • 2
  • 2
  • +1
9 Comments
 
LVL 8

Accepted Solution

by:
soupBoy earned 500 total points
ID: 38836275
you need to use rgba(value, value, value, opacity)
0
 
LVL 30

Expert Comment

by:LZ1
ID: 38836321
Can you show us a live link as well?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38836330
A tiny bit of code out of context does not give us much information.  Post a link to the page please.

Cd&
0
 

Author Comment

by:ats2012
ID: 38836361
Here is a live link of what i'm using.

http://www.csshelp.net/h17-sexy-drop-down-menu-jquery-css#
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.

 
LVL 8

Expert Comment

by:soupBoy
ID: 38836364
Here is a jsFiddle showing an example....http://jsfiddle.net/Rf4m9/
0
 
LVL 30

Expert Comment

by:LZ1
ID: 38836401
Try this for your CSS

html ul.topnav li ul.subnav li a{
background:url("http://i43.servimg.com/u/f43/14/73/12/96/dropdo10.gif") no-repeat scroll 10px center transparent;}

Open in new window

0
 

Author Comment

by:ats2012
ID: 38836428
This is what I did and its works perfect in Chrome but in IE it shows nothing.

ul.topnav li ul.subnav {
      list-style: none;
      position: absolute;
      left: 0; top: 35px;
      background: rgba(0, 0, 0, .4) ;
      margin: 0; padding: 0;
      display: none;
      float: left;
      width: 170px;
      -webkit-border-bottom-right-radius: 05px;
      -webkit-border-bottom-left-radius: 5px;
      -moz-border-radius-bottomright: 05px;
      -moz-border-radius-bottomleft: 5px;
      border-bottom-right-radius: 05px;
      border-bottom-left-radius: 5px;
      border: 1px solid #111;
      z-index:2;

}
html ul.topnav li ul.subnav li a {
      float: left;
      width: 145px;
      background: rgba(0, 0, 0, .4) url(images/drop_down/dropdo10.gif) no-repeat 10px center;
      padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
      background: rgba(0, 0, 0, .4) url(images/drop_down/dropdo10.gif) no-repeat 10px center;
}
0
 

Author Comment

by:ats2012
ID: 38836448
Got it, here is my final code:

ul.topnav li ul.subnav {
	list-style: none;
	position: absolute;
	left: 0; top: 35px;
	background: rgb(51, 51, 51) ;
	background: rgba(0, 0, 0, .4) ;
	margin: 0; padding: 0;
	display: none;
	float: left;
	width: 170px;
	-webkit-border-bottom-right-radius: 05px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-bottomright: 05px;
	-moz-border-radius-bottomleft: 5px;
	border-bottom-right-radius: 05px;
	border-bottom-left-radius: 5px;
	border: 1px solid #111;
	z-index:2;

}
ul.topnav li ul.subnav li{
	margin: 0; padding: 0;
	border-top: 1px solid #252525; 
	border-bottom: 1px solid #444; 
	clear: both;
	width: 170px;
	-webkit-border-bottom-right-radius: 05px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-bottomright: 05px;
	-moz-border-radius-bottomleft: 5px;
	border-bottom-right-radius: 05px;
	border-bottom-left-radius: 5px;
	z-index:2;
}

html ul.topnav li ul.subnav li a {
	float: left;
	width: 145px;
	background: rgb(102, 102, 102) ;
	background: rgba(0, 0, 0, .4) url(images/drop_down/dropdo10.gif) no-repeat 10px center;
	padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
	background: rgb(51, 51, 51) ;
	background: rgba(0, 0, 0, .8) url(images/drop_down/dropdo10.gif) no-repeat 10px center; 
}

Open in new window

0
 

Author Closing Comment

by:ats2012
ID: 38836449
Thanks
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

Title # Comments Views Activity
CSS Columns on Slider Mobile 4 51
CSS Font Arial Narrow 2 31
css help with menu spacing 10 31
Crazy text will not be removed no matter what I try! 13 15
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
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 style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

867 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

21 Experts available now in Live!

Get 1:1 Help Now