Dynamic Drive DHTML Scripts- Chrome CSS Drop Down Menu

[guynyc113]

Hi,

I want to thank you for this great and awsome code. I am not to expert in coding. I was creating a menu for my work site, however i have 9 Menu and each has sub menus. I was able to code and plug everything correctly except, the top 9 menu list. Since I have 9 topics, (computer, electronics & gps, camera & camcorders, Surveillance video & Observation etc.) Each topic has different width size, and since the width size is 99% on your code, each items resize to fit in the cell. However once i put all 9 menu list, it becomes 2 row. I mean it continues to go to 2nd row.

I was wondering is there anyway I can condense the big topics like
demo1. This is how it shows now
Electronics & GPS, Surveillance Video & Observation, TV's & LCD Monitors, Cameras & Camcorders

demo2. Want to make like this

Electronics & Surveillance Video & TV's & Cameras &
GPS Observation LCD Monitors Camcorders

I would like to know which part of the CSS code do i need to change to view like demo2. the full code is below.


PLEASE HELP will be Very Greatful.
Saiful
saif.bhuiyan@gmail.com




<link rel="stylesheet" type="text/css" href="chrometheme/chromestyle2.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>


</style><div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://www.Newcomputergen.com">Home</a></li>
<li><a href="#" class="style1" rel="dropmenu1">Computers Store</a></li>
<li><a href="#" rel="dropmenu2">Computer Parts</a></li>
<li><a href="#" rel="dropmenu3">Networking</a></li>
<li><a href="#" rel="dropmenu4">Electronics &amp; GPS</a></li>
<li><a href="#" rel="dropmenu5">Music Store</a></li>
<li><a href="#" rel="dropmenu6">Cellulars &amp; PDA</a></li>
<li><a href="#" rel="dropmenu7">Cameras &amp; Camcorders</a></li>
<li><a href="#" rel="dropmenu8">Surveillance Video &amp; Observations</a></li>
<li><a href="#" rel="dropmenu9">Helpdesk</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>

<div id="dropmenu4" 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>

<div id="dropmenu5" 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>

<div id="dropmenu6" 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>

<div id="dropmenu7" 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>

<div id="dropmenu8" class="dropmenudiv" style="width: 150px;">
<a href="http://www.google.com/">security</a>
<a href="http://www.yahoo.com">Camera</a>
<a href="http://www.msn.com">MSN</a>
</div>


<div id="dropmenu9" class="dropmenudiv" style="width: 150px;">
<a href="http://www.google.com/">Helpdesk</a>
<a href="http://www.yahoo.com">Contac us</a>
<a href="http://www.msn.com">Privacy</a>
</div>


<script type="text/javascript">

cssdropdown.startchrome("chromemenu")

</script>

[bluewalrus]

try giving the li a width you might have to give each a seperate class since some will be longer( or maybe small medium large).

[guynyc113]

Thank you for fast reply. I gave each li different class type, and on the css i gave the width size. but that didn't work at all. If you have any other suggestion would be appreciated.

thanks you once again.

[bluewalrus]

Do you have this online if so can you post a link or all of your code with all linked files code that is relevant as well.