Solved

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

Posted on 2013-01-30
9
370 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
[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
  • 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
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.

 

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
 
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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article discusses four methods for overlaying images in a container on a web page
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…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses

635 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