SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Jul 2004
    Location
    Calgary
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Transparent Drop Down Menu

    I am having a problem with a dropdown menu that contains a transparent background (which I want to keep). The problem is that the links in the dropdown are also transparent, so depending on what is behind them when the dropdown is visible, the color of the links could be multiple colors.

    I'm using this for the CSS:

    Code:
    .dropdown .menus {
    	color: #e4e0d0;
    	font-size:10px;
    }
    
    .dropdown {
    	-moz-opacity:.86;
    	filter:alpha(opacity=86);
    	padding: 0px 0 0 0;
    	}
    
    .dropdown a {
    	background-color: #000000;
    	color:#e4e0d0;
    	display: block;
    	font-weight:normal;
    	text-decoration: none;
    	padding:10px 25px;
    }
    
    .dropdown a:hover {
    	background-color: #4f524b;
    	color: #ffffff;
    }

    The html is like this:

    Code:
    <div id="newsContainer">
    	<div id="newsContent" class="dropdown">
    		<div class="menus"><img src="images/layout/nav/dropdown/top.gif" height="8" width="235" /><a href="../news/events_seminars.html">Events and Seminars</a><a href="../news/announcements.html">Announcements</a><a href="../newa/newsletters.html">Newsletters</a><img src="images/layout/nav/dropdown/top.gif" height="2" width="235" /><img src="images/layout/nav/dropdown/tab_bottom.gif" alt="" width="235" height="10" border="0" /></div>
    	</div>
    </div>
    <div id="aboutContainer">
    	<div id="aboutContent" class="dropdown">
    		<div class="menus"><img src="images/layout/nav/dropdown/top.gif" height="8" width="235" /><a href="../services/overview.html">Overview</a><a href="../services/pressure_transient_analysis.html">Pressure Transient Analysis</a><a href="../services/why_pta_testing.html">Why PTA Testing</a><a href="../services/regulatory_data_submissions.html">Regulatory Data Submissions</a><a href="../services/reservoir_simulation.html">Reservoir Simulation</a><a href="../services/why_art_simulation.html">Why ARt-Simulation</a><a href="../services/projects.html">Projects</a><img src="images/layout/nav/dropdown/top.gif" height="2" width="235" /><img src="images/layout/nav/dropdown/tab_bottom.gif" alt="" width="235" height="10" border="0" /></div>
    	</div>
    </div>
    <div id="cardiovascular_servicesContainer">
    	<div id="cardiovascular_servicesContent" class="dropdown">
    		<div class="menus"><img src="images/layout/nav/dropdown/top.gif" height="8" width="235" /><a href="../cardiovascular_services/cardio.html">Department of Cardio</a><a href="../cardiovascular_services/cmr.html">CMR Centre</a><a href="../cardiovascular_services/cardiology_consultants.html">Cardiology Consultants</a><a href="../cardiovascular_services/cardiac_rehabilitation.html">Cardiac Rehabilitation</a><a href="../cardiovascular_services/foothills_interventional.html">Foothills Interventional</a><img src="images/layout/nav/dropdown/top.gif" height="2" width="235" /><img src="images/layout/nav/dropdown/tab_bottom.gif" alt="" width="235" height="10" border="0" /></div>
    	</div>
    </div>
    <div id="educationContainer">
    	<div id="educationContent" class="dropdown">
    		<div class="menus"><img src="images/layout/nav/dropdown/top.gif" height="8" width="235" /><a href="../education/cardiology_training.html">Core Cardiology Training</a><a href="../education/torch.html">TORCH</a><a href="../education/cv_training.html">CV Surgery Training</a><a href="../education/foothills_interventional.html">Foothills Interventional</a><a href="../education/electrophysiology.html">Electrophysiology</a><a href="../education/cardiology_training.html">Dept. Cardiovascular/Respiratory Sciences</a><a href="../education/educational_events.html">Educational Events</a><a href="">Faculty of Nursing</a><a href="../education/patient.html">Patient Resource Centre</a><img src="images/layout/nav/dropdown/top.gif" height="2" width="235" /><img src="images/layout/nav/dropdown/tab_bottom.gif" alt="" width="235" height="10" border="0" /></div>
    	</div>
    </div>
    <div id="researchContainer">
    	<div id="researchContent" class="dropdown">
    		<div class="menus"><img src="images/layout/nav/dropdown/top.gif" height="8" width="235" /><a href="../research/cardiac_team.html">Cardiac Sciences Research Team</a><a href="../research/education.html">Education</a><a href="../research/smrg.html">SMRG</a><img src="images/layout/nav/dropdown/top.gif" height="2" width="235" /><img src="images/layout/nav/dropdown/tab_bottom.gif" alt="" width="235" height="10" border="0" /></div>
    	</div>
    </div>
    <div id="linksContainer">
    	<div id="linksContent" class="dropdown">
    		<div class="menus"><img src="images/layout/nav/dropdown/top.gif" height="8" width="235" /><a href="../links/institutes.html">Institutes</a><a href="../links/general.html"><a href="../links/echocardiology.html">Echocardiology</a><a href="../links/interventional_cardiology.html">Interventional Cardiology</a><a href="../links/research.html">Research</a><img src="images/layout/nav/dropdown/top.gif" height="2" width="235" /><img src="images/layout/nav/dropdown/tab_bottom.gif" alt="" width="235" height="10" border="0" /></div>
    	</div>
    </div>
    I'd appreciate any suggestions!

    Thanks

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The links will inherit the transparency, so if you only want the background to be transparent, consider using a 32-bit PNG with alpha transparency (you'll need the associated fix for IE<=6).


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •