Results 1 to 4 of 4

Thread: Dynamic Drive DHTML Scripts- Chrome CSS Drop Down Menu

  1. #1
    Join Date
    Jan 2009
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Dynamic Drive DHTML Scripts- Chrome CSS Drop Down Menu

    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>

  2. #2
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

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

  3. The Following User Says Thank You to bluewalrus For This Useful Post:

    guynyc113 (01-03-2009)

  4. #3
    Join Date
    Jan 2009
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default I gave each li width

    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.

  5. #4
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •