Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2013-01-30
9
Medium Priority
?
371 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 2000 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

Technology Partners: 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

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Suggested Courses

721 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