Chrome CSS Drop Down Menu (v2.5) install issue

**Kevin889** · 02-01-2010, 01:29 AM

1) Script Title:
Chrome CSS Drop Down Menu (v2.5)

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

3) Describe problem:
I have copied the code and everything, edited the theme up but whenever I preview the page the drop downs are not working. I need the drop down menu to work inside a bunch of tables. Whenever I preview and highlight over the menu items, the rollover effect works fine, however the drop down doesnt come up NOR does the little down arrow .gif file appear next to the drop down menu items. I have had issues before with dreamweaver when I attached as JS file to the .html file. Is this a normal DW issue? I use ADW CS4.

Here is my page code:

Code:

<html>
<head>
<title>Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript" type="text/javascript" src="source/chrome.js" ></script> 

<style type="text/css">
<!--
body {
	background-image: url(images/bkg.gif);
	background-repeat: repeat-x;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}

.chromestyle{
width: 100%;
font-weight: bold;
height: 24px;
font-size: 12px;
}

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

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

.chromestyle ul li{
display: inline;
}

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

.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(images/navover.gif) center center repeat-x; /*THEME CHANGE HERE*/
}

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

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
}


.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: black;
}

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

.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #F0F0F0;
}
-->
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (index.psd) -->
<table id="Table_01" width="800" height="1001" border="0" cellpadding="0" cellspacing="0" align="center">
	<tr>
		<td rowspan="8">
			<img src="images/template_01.gif" width="53" height="1000" alt=""></td>
		<td colspan="4">
			<img src="images/template_02.gif" width="737" height="174" alt=""></td>
		<td rowspan="8">
			<img src="images/template_03.gif" width="10" height="1000" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="#" rel="dropmenu1">Company</a></li>
<li><a href="#" rel="dropmenu2">Team</a></li>
<li><a href="#" rel="dropmenu3">Media</a></li>	
<li><a href="#">Store</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

<div id="dropmenu1" class="dropmenudiv">
<a href="#">About Phat Nasty</a>
<a href="#">Mission Statement</a>
</div>

<!--2nd drop down menu -->                                                
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="#">World(CEO/Founder)</a>
<a href="#">Pooh-T(President)</a>
<a href="#">Jahqueen(Promotions)</a>
<a href="#">Kevin Schaeffer(Media Developer)</a>
<a href="#">Kajmir Royale(Producer)</a>
<a href="#">Boonie Mayfield(Producer)</a>
<a href="#">SWOLE(Producer)</a>
<a href="#">Blast Off Sounds(Producer)</a>
<a href="#">Ian Knox(Producer)</a>
<a href="#">Scorp Dezel(Producer)</a>
<a href="#">88 Soul Production(Producer)</a>
</div>

<!--3rd drop down menu -->                                                   
<div id="dropmenu3" class="dropmenudiv" style="width: 150px;">
<a href="#">Phat Nasty in the Media</a>
<a href="#">Gallery</a>
</div>
            </td>
		<td colspan="2" rowspan="3">
			<img src="images/template_05.gif" width="313" height="62" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="images/template_06.gif" width="1" height="37" alt=""></td>
		<td>
			<img src="images/template_07.gif" width="423" height="33" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/template_08.gif" width="423" height="4" alt=""></td>
	</tr>
	<tr>
		<td colspan="3" rowspan="2">
			<img src="images/template_09.gif" width="494" height="545" alt=""></td>
		<td>
			<img src="images/template_10.gif" width="243" height="28" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/template_11.gif" width="243" height="517" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="images/template_12.gif" width="1" height="219" alt=""></td>
		<td colspan="3">
			<img src="images/template_13.gif" width="736" height="55" alt=""></td>
	</tr>
	<tr>
		<td colspan="3">
			<img src="images/template_14.gif" width="736" height="164" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/spacer.gif" width="53" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="423" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="70" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="243" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="10" height="1" alt=""></td>
	</tr>
</table>
<!-- End Save for Web Slices -->

</body>
</html>

**bluewalrus** · 02-01-2010, 02:07 AM

What do you mean by preview? Do you mean in a browser or in the design mode of DW? If in a browser and your working locally is the js file in a folder called source from where the file is saved or if working from ftp/ a live site is the js in a folder called source from there the file is being called? If it is live please post a link.

**Kevin889** · 02-01-2010, 02:19 AM

When I say preview I mean whenever I preview it in browser not DW. The site is not live so there is no link. Would it help if I made it live for you?

**Kevin889** · 02-01-2010, 02:33 AM

Live Version:
http://k11prodesigns.com/pnpro/template.html

**Kevin889** · 04-06-2010, 03:16 AM

Please help I have continued work on this project here. Need help on above noted problem still..

**wangster** · 04-06-2010, 04:06 AM

Did you upload the "source/chrome.js" file? I made that mistake sometime ago so I thought I'd bring it up. Also, you must have the source files in the exact same folder as they are in your hard drive. Sometimes, people change the folder names and locations after they upload files to the server.

I'm no expert in programming so I can't help you too much but sometimes we do make stupid mistakes...

Thread: Chrome CSS Drop Down Menu (v2.5) install issue

Thread Tools

Search Thread

Chrome CSS Drop Down Menu (v2.5) install issue

Bookmarks

Bookmarks

Posting Permissions