dropdown menu

**karrie** · 03-15-2011, 03:01 PM

1) Script Title: Chrome CCS Drop Down Menu

2) Script URL (on DD): <div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="#" rel="dropmenu1">Resources</a></li>
<li><a href="#" rel="dropmenu2">News</a></li>
</ul>
</div>


<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>
</div>


<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>

<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>

3) Describe problem: Below is my script and my dropdown menu is located under the "packages" choice. How do I fix this?

<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="aboutus.html">About US</a></li>
<li><a href="photovideo.html">Photos/Videos</a></li>
<li><a href="#" rel="dropmenu1">Packages</a></li>
<li><a href="contact.html">Contacts</a></li>
</ul>
</div>


<div id="dropmenu1" class="dropmenudiv">
<a href="riflepackage.html">Rifle Package</a>
<a href="archerypackage.html">Archery Package</a>
<a href="muzzlepackage.html">Muzzle Package</a>
</div>
<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>

**ddadmin** · 03-16-2011, 03:18 AM

I assume "packages" is a HTML SELECT element, with the issue occurring in IE? Please post a link to the page on your site that contains the problematic script so we can check it out.

**karrie** · 03-16-2011, 12:58 PM

Here is the site address: http://www.tech1st.biz/trophydeerout...est/index.html

Thanks!

**azoomer** · 03-16-2011, 03:39 PM

You need to link to the chromestyle.css and the chrome.js to get it working.
See the documentation here
and look at the demo here
Below is the sourcecode of the demo, I have highlighted the links that are missing on your page:

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" lang="en" xml:lang="en">
<head>
<title>Chrome CSS Drop Down Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="chrometheme/chromestyle.css" />

<script type="text/javascript" src="chromejs/chrome.js">

/***********************************************
* Chrome CSS Drop Down Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

</head>

<body>



<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="#" rel="dropmenu1">Resources</a></li>
<li><a href="#" rel="dropmenu2">News</a></li>
<li><a href="#" rel="dropmenu3">Search</a></li>	
</ul>
</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>

<form>
<p>Sample form to demonstrate hover over windowed objects in IE5.5 to IE6 via iframe shim technique. IE7+ not affected by issue.</p>
<select style="width: 80%">
<option>whatever</option>
<option>whatever</option>
<option>whatever</option>
</select><br />
</form>

<p><b>Note:</b> To see how the menu looks with an alternate theme, just change the code:</p>

<pre>&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;chrometheme/chromestyle.css&quot; /&gt;</pre>

<p>inside the HEAD section above to reference one of the three alternate CSS files instead: "chromestyle2.css", "chromestyle3.css", or "chromestyle4.css"</p>

<p><b>Version Note:</b> v2.4. Visit <a href="http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm">http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm</a> for instructions/ changelog.</p>

<p align="center">Copyright 2006-2008 <a href="http://www.dynamicdrive.com/notice.htm">Dynamic Drive</a></p>



</body>

</html>

you would want to remember the copyright notice as well.

**karrie** · 03-16-2011, 06:10 PM

Ok I added the missing code, but the dropdown menu is still appearing to the right of the other menu options. I need the dropdown to come down under the menu name PACKAGES. I posted it again on http://www.tech1st.biz/trophydeerout...est/index.html

I'm not sure if maybe I placed the missing code in the wrong spot or what.

**azoomer** · 03-16-2011, 07:11 PM

At a glance, the code looks okay, but the paths to chromestyle.css and chrome.js do not work. You need to make sure the files can be found on the server in the location the links are pointing to.
Did you upload chromestyle.css and and chrome.js to the server ? At what location are they ?
The easiest way to test if the path to a js or css file is working, is to open the page in firefox, view page source and click on the css og js path in the sourcecode. That should take you straight to the file in question. If it doesn't then the path is not working and needs adjustment.

**karrie** · 03-17-2011, 01:22 PM

Thank you so much for the suggestion about he paths...that fixed it!!!!!!!!!!!

**karrie** · 03-17-2011, 02:11 PM

I have a problem with the placement of the dropdown menu. In IE its to far to the right I would like it closer to the actual menu. However it looks fine in Firefox. Can this be fixed in IE without messing it up in Firefox? Here is the url again: http://www.tech1st.biz/trophydeerout...est/index.html

**ddadmin** · 03-18-2011, 04:06 AM

Originally Posted by karrie

I have a problem with the placement of the dropdown menu. In IE its to far to the right I would like it closer to the actual menu. However it looks fine in Firefox. Can this be fixed in IE without messing it up in Firefox? Here is the url again: http://www.tech1st.biz/trophydeerout...est/index.html

Try moving the markup for the drop down menus themselves and the initialization code to the very end of your page, such as right above the </body> tag. For example:

Code:

<!--1st drop down menu -->
<div id="dropmenu1" class="dropmenudiv"> 
				<a href="riflepackage.html">Rifle Package</a> 
                <a href="archerypackage.html">Archery Package</a> 
                <a href="muzzlepackage.html">Muzzle Package</a>
</div>
<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>

</body>

**karrie** · 03-18-2011, 01:11 PM

You are a miracle worker! That fixed my other problem and thank you so much!

Thread: dropdown menu

Thread Tools

Search Thread

dropdown menu

url

Bookmarks

Bookmarks

Posting Permissions