Chrome Drop Down menu covers the link

**voodoo** · 09-04-2008, 09:55 PM

1) Script Title: Chrome CSS Drop Down Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...rome/index.htm

3) Describe problem:
First time posting here, so first of all, Hi to everyone and thanks for trying to help.
Been loosing my mind while trying to use Chrome on an existing website that I had to work on.
Page is on a test hosting at:
http://www.goldcoastrestaurantguide.com/thi/index.html
Had to use images for the link, hoping this is not the source of the problem but doubt it.
Not strong enough in js or css to figure it out.
IE works fine (what do you know?) but Firefox places the drop down menu over the image and that image must be used as a link as well.

I know the code is a bit of a mess, be kind as I also had to use a couple of tricks (like the div "clear")to make it work as it is.

Code:

<body>
<table cellpadding="0" cellspacing="0" width="980" align="center">
<tr>
  <td colspan="2" width="980">
<div class="cabecera"><img src="shop/template_images/cabecera.jpg"></div>
<div class="chromestyle" id="chromemenu">
<ul>
<li><img src="shop/template_images/barramenu.jpg" width="552" height="29"></li>
<li><a href="index.html"><img src="shop/template_images/home.jpg" width="79" height="29" border="0"></a></li>
<li><a href="catalog.html"><img src="shop/template_images/catalogue.jpg" width="121" height="29" border="0"></a></li>
<li><a href="package.php" rel="dropmenu1"><img src="shop/template_images/packages.jpg" width="105" height="29" border="0"></a></li>
<li><a href="contactus.php"><img src="shop/template_images/contactus.jpg" width="123" height="29" border="0"></a></li>	
</ul>
</div>

<!--1st drop down menu -->
<div class="clear">                                                   
<div id="dropmenu1" class="dropmenudiv">
<a href="package.php?pack=1">Tropical Fusion</a>
<a href="package.php?pack=2">Package 2</a>
<a href="package.php?pack=3">Package 3</a>
<a href="package.php?pack=4">Housewares</a>
<a href="contactus.php">Electronics</a>
<a href="contactus.php">Custom Packages</a>
</div>
</div>
<script type="text/javascript">

cssdropdown.startchrome("chromemenu")

</script></td>
</tr>


/* CSS Document */
* {margin: 0; padding: 0;}
.clear{
clear:both;
}
.chromestyle{
width:980px;
height:29;
display:inline;
float:left;
margin:0px;
padding:0px;
clear:both;
}

.chromestyle img
{
float:left;
border:none;
}

.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

.chromestyle ul{
border: 0px solid #BBB;
width: 100%;
background: url(chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
margin:0px;
padding:0px;
text-align: center; /*set value to "left", "center", or "right"*/
}

.chromestyle ul li{
display: inline;
float: left;
}

.chromestyle ul li a{
color: #494949;
padding: 0px 0px;
margin: 0;
text-decoration: none;
border-right: 0px solid #DADADA;
}

.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
background: url(chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
}

/* ######### Style for Drop Down Menu ######### */

.dropmenudiv{
position:absolute;
top:0;


border: 2px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 150px;
visibility: hidden;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4); /*Add Shadow in IE. Remove if desired*/
}


.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: #663333;
}

* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}

.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #F0F0F0;
}



#chromemenu ul li
{
display: inline;
float: left;
}
#chromemenu ul
{
margin:0px;
padding:0px;
}
#chromemenu img
{
float:left;
border:none;
}

Hope someone can help
Jeremy

**ddadmin** · 09-05-2008, 09:01 PM

Most of the positioning problems with the drop down menus can be solved by making sure the HTML for the drop down DIVs themselves is outside any container tag on the page other than the BODY. So in your case, try moving all the drop down DIVs to the bottom of your page, just above the "</body>" tag:

Code:

<!--1st drop down menu -->
<div class="clear">                                                   
<div id="dropmenu1" class="dropmenudiv">
<a href="package.php?pack=1">Tropical Fusion</a>
<a href="package.php?pack=2">Package 2</a>

<a href="package.php?pack=3">Package 3</a>
<a href="package.php?pack=4">Housewares</a>
<a href="contactus.php">Electronics</a>
<a href="contactus.php">Custom Packages</a>
</div>
</div>
<script type="text/javascript">

cssdropdown.startchrome("chromemenu")

</script>

</body>

BTW, please note that your page is currently in violation of our usage terms, since the credit notice doesn't appear inline on the page. Please reinstate the credit notice: http://www.dynamicdrive.com/notice.htm

Thread: Chrome Drop Down menu covers the link

Thread Tools

Search Thread

Chrome Drop Down menu covers the link

Bookmarks

Bookmarks

Posting Permissions