Hey guys,
I'm helping out a friend in designing a site for his business and got stuck with JS/CSS Dropdown menu. Searching around I found one of the easiest to implement scripts at Dynamic Drive.

I managed to implement the script partially, i.e. got the top menu showing up. Looked good so far. Here's the screenshot:


After defining the menu divs, you're supposed to call the script that performs the dropdown action using a code like this:


When I call the function, my page layout gets totally garbled and the dropdown function never works. Here's how it looks like...


Do the web-design pros out here have an idea why it's getting messed up like this ? The example layout can be viewed at: http://gaute.chaos-laboratory.com
Also attached along with this post is a zip containing the site files so far.

Any help will be greatly appreciated.

Cheers,
m^e

Site Files:

There are just two things that need to be fixed, both in the index.html file. First of all, let's take a look at the header. Over there, you load the JavaScript file that contains the necessary function. You used the following code:



However, this way, the text that goes after (including a big part of the HTML code) is inside the <script> tag and considered JavaScript. That's why you need to close the tag in the header:



OK, so we've got the whole page being displayed, but it's still not working. Why? Another JavaScript problem, except now it's about calling the function. After the menu, you did it like this:



As you probably know, <!-- and --> are used to indicate comments or code that will not be displayed/executed. By removing these, you get a fully functional menu



There is one more thing, though. I'm sure you didn't put those comments without a reason - yes they should be around there, but like this:



We have to do this in order to deal with browsers that don't support JavaScript. Be careful, the code must be just like this, with a new line for each element, otherwise it would again be a comment, if you put it like this:



Since the starting and ending point for the comment are alone and in separate lines, a JavaScript browser will ignore them because those are not JS commands. Older browsers will comment the JS function, because they don't recognize the <script> tags.

Hey, Post here the CSS script

You have in the file attached with the first post, but the problem is (I believe) already solved

Great job pyost, first i try directly the code and nothing works, after make the corrections you give it works perfectly. Now, if you plan to validate your website to be xhtml 1.1 you need to remove the comment tags because if you dont your page do not pass the validation process and also, if you plan to be a valid xhtml 1.0 then you need to do some little modifications to conform the validation. The first modification you need to perform is to declare correctly the DOCTYPE because it is not correctly typed, you need to change this:


to this:


BTW, m^e thanks for your code, i will modify it to use on another website, but dont worry, i will only use your page structure because is very simple and clean, not your data

Best regards,

Damn guys - that was such a silly blunder and got fixed in one go Thanks to all of you... However, I'll be back with more questions soon.

As of now, there's an issue with the site - do you know of any way to fix the footer below ? What I mean is that, if I stuff in a lot of content in the Center column, it expands below and covers up the footer. What's the CSS trick, that'll make it move down along with the content ??

Ugh.. The way you created the layout is a bit confusing I am sure the problem can be easily solved if you used floats for the sidebar. This way, however, I cannot think of a solution.

Hmmm.. what's the float story ?? Any way I can modify my css and make the sidebars float instead??

Take a look at this page for more information concerning positioning your sidebars with float:left and float:right properties:
http://www.shadow-fox.net/tutorial/3-Colum...and-Two-Columns

When you do so, you will need to add clear:both to your footer in order for it to be at the end of all the columns.

I got the 3 column layout from one of the CSS Tutorial sites and the biggest advantage of my layout is that the Center column comes up first. That is a MUST if you're concerned about SE-Optimization of your pages.

The layout you've shown makes the two side columns come up first. Crawlers don't like that kinda sites Otherwise it'd have been a good layout.

Any alternatives ???