CSS Chrome Menu - Dropdowns SPACE BELOW it

**member** · 09-26-2007, 07:42 PM

1) Script Title:

Chrome CSS Drop Down Menu (v2.01)

2) Script URL (on DD):

http://www.dynamicdrive.com/dynamici...rome/index.htm

3) Describe problem:

Hi,

I am having a problem with the menu as the dropdowns seem to appear a distance away below, when it should be right under the horizontal bar.

For example: the menu should look like this:

http://www.islamcentre.net/scripts/menu/demo.htm (as the demo suggests)

another plain version is this: http://www.islamcentre.net/scripts/menu/jjj.htm

I am using Bluevoda website builder which is a kind of WYSIWYG editor. and when i put everything in place like the instructions say, i get the dropdowns in the wrong place like this:

http://www.islamcentre.net/scripts/m...eededondis.htm
THE ABOVE URL IS THE PROBLEM PAGE

I cannot seem to figure out what is wrong.

Please Help me.
P.S I have not modified any of the CSS or JS files, and remain intact as downloaded.

Thank You. Your help and Support is Much Appreciated.

**ddadmin** · 09-27-2007, 05:07 AM

Problems with the sub menus not dropping down in the correct positon usually have something to do with them being inside other container tags on the page that are positioned as well. Try moving all your sub menu DIVs plus the initialization script outside the main DIV container, so it's contained just by the <BODY> tag. One place is the bottom of your page, right above the </body> tag:

Code:

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

</body>

**member** · 09-27-2007, 12:36 PM

Thanks for ur help admin.

I have tried to put in the code, but no luck. Maybe i put the code in the the worng place.

Could you incorporate your solution with my problem page and post the full page code on this forum?:

http://www.islamcentre.net/scripts/m...eededondis.htm

Thanks admin. Ur help is much Appreciated.

**ddadmin** · 09-28-2007, 07:49 AM

Sure, the page should look like this:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled Page</title>
<meta name="GENERATOR" content="Created by BlueVoda">
<link rel="stylesheet" type="text/css" href="http://www.islamcentre.net/scripts/menu/chrometheme/chromestyle.css" />

<script type="text/javascript" src="http://www.islamcentre.net/scripts/menu/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>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<div id="bv_" style="position:absolute;left:34px;top:34px;width:795px;height:150px;z-index:0" align="left">
<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>
</div>
 <font size='-3' face='Times New Roman'><a href='http://www.i6networks.com' title='Free Web Hosting'>Free Web Hosting</a> by i6

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

</body>
</html>

**luckyros** · 10-05-2007, 07:00 AM

Originally Posted by ddadmin

Problems with the sub menus not dropping down in the correct positon usually have something to do with them being inside other container tags on the page that are positioned as well. Try moving all your sub menu DIVs plus the initialization script outside the main DIV container, so it's contained just by the <BODY> tag. One place is the bottom of your page, right above the </body> tag:

Code:

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

</body>

I have used the same code on my website and its working fine only thing is a "v" like character comes at the end of every menu on my home page. Please help.

**ddadmin** · 10-05-2007, 08:22 AM

Luckyros, please start your own thread for your own question on something. Anyhow, within the .css file, just remove the line in red:

Code:

.chromestyle ul li a[rel]:after{ /*HTML to indicate drop down link*/
content: " v";

Thread: CSS Chrome Menu - Dropdowns SPACE BELOW it

Thread Tools

Search Thread

CSS Chrome Menu - Dropdowns SPACE BELOW it

Bookmarks

Bookmarks

Posting Permissions