Chrome CSS Drop Down Menu is hidden under transparent elements; Text must be opaque!

**msmith0957** · 07-23-2010, 08:56 AM

1) Script Title:
Chrome CSS Drop Down Menu
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...rome/index.htm
3) Describe problem:
My problem may be summed up in the two attachments I have posted. Basically, I have the menu within a div that is slightly transparent (so therefore the menu is also slightly trans) and below the menu I have a larger image which is also just slightly transparent. The problem I see is that if the image below is transparent, the menu falls behind the layer, but if it is opaque, it lies right on top as it should. Initially I thought this could be simply solved with settings a lower z-index on the image below. That didn't solve anything however. I also tried setting a higher z-index for various menu styles, and tried each one, to no avail. Any ideas people ?

I should note, I only slightly modified the source html/css to modify a few heights/margins, and haven't touched the javascript. Other than that, everything is more or less how the demo ( http://www.dynamicdrive.com/dynamici...hrome/demo.htm ) is set up.

Thanks

Update:

In addition to my previous problem (which has been solved) I also need to make the text opaque while the background is transparent in the dropdown menus, any suggestions ?!

**vwphillips** · 07-23-2010, 09:46 AM

if your menu and image elements are nested in separate parent nodes the parent node z-Index will take precidence and the menu and image z-Index will not be effective.

you will need to post a link to your page to confirm that this is the problem

**msmith0957** · 07-23-2010, 03:59 PM

Here's a page I threw together real quick to show the problem. (Yes, I know its ugly lol)

http://s194254623.onlinehome.us/temp/

I understand what you're saying about parent nodes taking precedence, but everything you see is contained within the "container" class. I just thought that I could have a style take precedence by using !important.

Anyway, what do you recommend I try ?

**vwphillips** · 07-23-2010, 04:14 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TEST TEST TEST</title>
<link href="http://s194254623.onlinehome.us/temp/styles/styles.css" rel="stylesheet" type="text/css" />
<link href="http://s194254623.onlinehome.us/temp/styles/nav-menu.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://s194254623.onlinehome.us/temp/scripts/nav-menu.js">
/***********************************************
* Chrome CSS Drop Down Menu- (c) Dynamic Drive DHTML code library
***********************************************/
</script>
</head>
<body>
<div id="container">
  <div id="nav">
  <a href="#" target="_self"><img style="float:left;" src="http://s194254623.onlinehome.us/temp/images/logo-home.gif" width="270" height="110" /></a>


  <div class="chromestyle" id="chromemenu">
<ul>

<li><a href="#">Home</a></li>
<li><a href="#" rel="dropmenu1">Basses</a></li>
<li><a href="#" rel="dropmenu2">Strings</a></li>
<li><a href="#" rel="dropmenu3">Accessories</a></li>
<li><a href="#" rel="dropmenu4">Artists</a></li>
<li><a href="#" rel="dropmenu5">Photo Gallery</a></li>
<li><a href="#" rel="dropmenu6">About</a></li>

</ul>
</div>






 </div>
  <div id="content"></div>
  <div id="msg">Vivamus faucibus augue eget eros elementum posuere. Ut quis magna leo. Morbi arcu velit</div>
  <div id="info-blocks">
    <div class="block">

      <div class="blockCapt floatL">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id ante eu tortor blandit vehicula. Aenean sit amet pharetra dolor. Maecenas eu lacus eu sem fringilla lacinia sed ac lectus. Etiam nec diam erat. Nullam porttitor luctus libero et volutpat. </p>
      </div>
      <div class="imgOut floatR">
        <div class="imgMid">
          <div class="imgIn"><img width="116" height="100" /></div>
        </div>
      </div>

    </div>
    <div class="block">
      <div class="blockCapt floatL">
        <p>Aliquam sit amet augue nisl. Vestibulum eu sem non tellus rutrum ullamcorper. Vivamus faucibus augue eget eros elementum posuere. Ut quis magna leo. Morbi arcu velit, ultrices id </p>
      </div>
      <div class="imgOut floatR">
        <div class="imgMid">
          <div class="imgIn"><img width="116" height="100" /></div>

        </div>
      </div>
    </div>
    <div class="block">
      <div class="blockCapt floatL">
        <p>Praesent a dolor eleifend turpis venenatis pellentesque at eu enim. Donec fermentum sapien vitae nunc fermentum sed elementum dolor fringilla. Donec gravida blandit faucibus. Aliquam erat volutpat. Praesent in libero nibh, ut ullamcorper metus. </p>
      </div>
      <div class="imgOut floatR">

        <div class="imgMid">
          <div class="imgIn"><img width="116" height="100" /></div>
        </div>
      </div>
    </div>
  </div>
  <div id="copyright"></div>
</div>
<!--1st drop down menu -->
<div id="dropmenu1" class="dropmenudiv">
<a href="http://www.dynamicdrive.com/">Dynamic Drive</a>
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
<a href="http://www.codingforums.com">Coding Forums</a>
<a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>
</div>
<!--2nd drop down menu -->
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="http://www.cnn.com/">CNN</a>
<a href="http://www.msnbc.com">MSNBC</a>
<a href="http://news.bbc.co.uk">BBC News</a>
</div>

<!--3rd drop down menu -->
<div id="dropmenu3" class="dropmenudiv" style="width: 150px;">
<a href="http://www.google.com/">Google</a>
<a href="http://www.yahoo.com">Yahoo</a>

<a href="http://www.msn.com">MSN</a>
</div>
<script type="text/javascript">

cssdropdown.startchrome("chromemenu")

</script>

</body>
</html>

**msmith0957** · 07-23-2010, 04:42 PM

Ok, wow! that was quick, but yes, that works just fine, much appreciated

**msmith0957** · 07-26-2010, 01:50 AM

With fixing that problem, another arose. Is there a way I can make the text NOT transparent but the dropdown menu transparent? This has to be possible and I'm sure its a simple style change, but what change exactly.

Thanks.

Thread: Chrome CSS Drop Down Menu is hidden under transparent elements; Text must be opaque!

Thread Tools

Search Thread

Chrome CSS Drop Down Menu is hidden under transparent elements; Text must be opaque!

The Following User Says Thank You to vwphillips For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions