Need help with Chrome CSS drop-down menu

**cbahm** · 02-21-2006, 03:10 AM

[Script: DD Chrome CSS Drop Down Menu
http://www.dynamicdrive.com/dynamici...rome/index.htm

Hi, I am inexperienced and am fumbling my way through learning to use CSS. I liked the elegant look of the DD Chrome CSS Drop Down Menu but am not doing it correctly. I've placed it in the template on my Blogger.com blog, which I host at this URL:

http://www.carolynbahm.com/famblog/family_index.htm

Here are the problems I'm having: The submenus don't pop up, and the menu bar is on two lines for some reason. And the blue shading doesn't show up.

I'm not sure what I did wrong, although placing the style and/or the rest of the coding in the wrong place in the template is a strong possibility. I have attached a text file that includes my template.

Thanks to anyone who is willing to advise.

- Carolyn Bahm

**jscheuer1** · 02-21-2006, 11:56 AM

I don't see this or anything like it on your page:

Code:

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

/***********************************************
* Chrome CSS Drop Down Menu- © 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>

Look at the demo.htm page's source, use it as a guide. There could be other problems.

**cbahm** · 02-21-2006, 03:48 PM

Hi, John,

Thanks for taking a look. I didn't understand

the use of the demo file at first (newbie blindness, I guess). I added the script you mentioned but it didn't fix the problem with the nav bar's looks and functionality on my blog. I'll take another look at the demo file again after work tonight, though.

If you have any further thoughts on how to fix this, I'd appreciate the advice. I've attached a zip file containing two text files -- my modified blog template and also the source code shown when I hit "view source" for the blog's front page.

Thx - Carolyn

**jscheuer1** · 02-21-2006, 11:48 PM

That being the case I suggest you take few deep breaths and carefully go over all of the instructions. This could be a tough case as, there are already many scripts on that blog page. Any one of which could create a conflict. So, read up on the demo page and try just installing to a blank page locally to see if you've got the hang of it first.

Just putting the language that I pointed out as missing before is not 'adding the script'. That is just a call to the script file. Said file must also be available to the page that is calling it. Same thing is true of the images and style.

After you have success with a local demo, then try putting it on your blog. If you have problems at that point, or along the way, get back to us.

**cbahm** · 02-22-2006, 02:10 AM

That sounds very sensible, and I'll do it. Thanks --

**cbahm** · 02-22-2006, 02:36 PM

Okay, what I've determined is that I'm not experienced enough to fix this; I'm clueless. Is there anyone you can recommend who would fix this for me for a fee? Would you be interested?

Not only is this not working, it also looks funny (too wide) in Firefox in addition to looking funny in IE. I'd like to find someone who can fix this dropdown menu so it's functional and looks right in all major browsers.

Thanks for your time so far, in any case; I appreciate the help. I think if I'm going to do this myself I need to start with more basic study of CSS. ;o)

Best rgds,
Carolyn

**jscheuer1** · 02-22-2006, 03:35 PM

Well, don't give up so easily. Something tells me you haven't tried this on a fresh page yet, I could be wrong about that. Anyways, I just looked at the script some more and at your blog page. The script has no onload event that I can see so conflicts are less likely. You have put the call for the script inside the style section for the page and made it encompass the style for the menu. It will never work that way. You have something like so:

Code:

  <style type="text/css">
/*
-----------------------------------------------
Blogger Template Style
Name:     Mr. Moto Rising (Ellington style)
Designer: Jeffrey Zeldman
URL:      www.zeldman.com
Date:     23 Feb 2004
----------------------------------------------- */

some page styles skipped for brevity

#sidebar  {
  width: 226px;
  float: right;
  }
<!-- I ADDED THE 'SCRIPT TYPE' LINE BELOW BUT IT DIDN'T FIX THE PROBLEM WITH THE DROPDOWN BAR. -->
<script type="text/javascript" src="chrome.js">
/***********************************************
* Chrome CSS Drop Down Menu- Â© 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
***********************************************/



<!-- THIS IS WHERE THE CHROME CSS DROP DOWN MENU STYLE BEGINS --> 
#chromemenu{
width: 99%;

some styles for the menu skipped

.dropmenudiv a:hover{ /*Theme Change here*/
background-color: #F0F0F0;
}

 <!-- THIS IS WHERE THE CHROME CSS DROP DOWN MENU STYLE ENDS --> 
 </script>
<!-- I ADDED THE '/SCRIPT' LINE ABOVE ALSO; STILL DIDN'T FIX THE PROBLEM WITH THE DROPDOWN BAR. -->

  /* Bottom layout */


#footer  {
  clear: left;

some bottom layout styles skipped
</style>

Now, the comments in green cannot be in a style section, and neither can a script call (blue). My comments in red don't belong either, they just describe what I am leaving out for brevity. So get rid of all those and move the call below the style section, like so:

Code:

  <style type="text/css">
/*
-----------------------------------------------
Blogger Template Style
Name:     Mr. Moto Rising (Ellington style)
Designer: Jeffrey Zeldman
URL:      www.zeldman.com
Date:     23 Feb 2004
----------------------------------------------- */

some page styles skipped for brevity

#sidebar  {
  width: 226px;
  float: right;
  }

#chromemenu{
width: 99%;

some styles for the menu skipped

.dropmenudiv a:hover{ /*Theme Change here*/
background-color: #F0F0F0;
}

  /* Bottom layout */


#footer  {
  clear: left;

some bottom layout styles skipped
</style>
<script type="text/javascript" src="chrome.js">
/***********************************************
* Chrome CSS Drop Down Menu- Â© 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>

There could still be other problems but, this will be a huge step in the right direction.

**cbahm** · 02-23-2006, 01:09 AM

Hi, John,

I tried your recommendations and now ... it works, it works, it works!!!!! Thank you!

Now I've got to figure out why the navbar is breaking onto a second line in IE6, why the navbar's all neatly on one line but too wide in Firefox, and why the blue shading isn't showing up (I swear I got the path right for that image), but those are minor compared to functionality.

I'm inspired to try again now. You were also right; I haven't tried this on a completely clean page yet.

Thx very much for your time and your help. - Carolyn

**cbahm** · 03-02-2006, 09:00 PM

John,

A follow-up dumb question here. How do I try this on a clean page, if I'm using Blogger? I am used to tweaking my blog's template. Should I just open a new blog to experiment with this?

Duh. I think I just answered my own question ...

Thanks -- Carolyn

**cbahm** · 03-02-2006, 09:53 PM

Hi -- I did the testing with another throwaway Blogger.com blog and finally managed to figure out what the problem was. Just giving an update -- the drop-down menu now works at my blog:

http://www.carolynbahm.com/famblog/family_index.htm

Thanks, John! - Carolyn