Solved

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

Posted on 2013-01-30
9
367 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
NAS Cloud Backup Strategies

This article explains backup scenarios when using network storage. We review the so-called “3-2-1 strategy” and summarize the methods you can use to send NAS data to the cloud

 

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

Is Your AD Toolbox Looking More Like a Toybox?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

Question has a verified solution.

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

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
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…

821 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