Solved

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

Posted on 2013-01-30
9
365 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
Comment Utility
you need to use rgba(value, value, value, opacity)
0
 
LVL 30

Expert Comment

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

Expert Comment

by:COBOLdinosaur
Comment Utility
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
Comment Utility
Here is a live link of what i'm using.

http://www.csshelp.net/h17-sexy-drop-down-menu-jquery-css#
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 8

Expert Comment

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

Expert Comment

by:LZ1
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Thanks
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Suggested Solutions

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
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 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…

771 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

12 Experts available now in Live!

Get 1:1 Help Now