Need help with drop-down javascript menu

A5chow · **Posted:** April 4th, 2012, 12:53 pm

Hello!

I'm working on building a website for the job I work at right now. I need help in figuring out why the menu isn't working out...

So here is what I've built so far: http://silverbergandsons.com/beta/

Here is the html:

Hidden:

Code: Select all

<html>
<head>
<title>S. Silverberg &#38; Sons Jewelers - Tucson, Arizona - Custom design your own unique and original engagement ring, wedding band, bridal set, or other fine jewelry.</title>
<meta  name="description"  content="S. Silverberg &#38; Sons Jewelers - Custom design your own unique and original engagement ring, wedding band, bridal set, or other fine jewelry."  />
<meta  name="keywords"  content="silverberg, sons, tucson, arizona, jewelers, jeweler, jewelry, store, stores, engagement, wedding, bridal, anniversary, ring, rings, band, bands, set, sets, custom, design, designed, designing, diamond, diamonds, gift, gifts, gem, gems, gemstone, gemstones, precious stones, birthstones, bracelet, bracelets, pendant, pendants, necklace, necklaces, earring, earrings, gold, platinum, estate, estates, buy, sell, repair, repairs, appraisal, appraisals, appraiser, insurance, watch, watches, seiko, men, ladies "  />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="java.js"></script>
</head>
<body>
<div class="header" style="text-align:center">
<img src="images/header_logo.png" alt="Welcome to S. Silverberg & Sons Jewelers">
</div>
<ul id="menu">
<li><a href="#"><img src="images/nav_jewelry.png" border="0" alt="Jewelry" onmouseover="this.src='images/nav_jewelry_select.png'" onmouseout="this.src='images/nav_jewelry.png'" /></a></li>
<li><a href="#"><img src="images/nav_diamonds.png" border="0" alt="Diamonds" onmouseover="this.src='images/nav_diamonds_select.png'" onmouseout="this.src='images/nav_diamonds.png'" /></a></li>
<li><a href="#"><img src="images/nav_design.png" border="0" alt="Custom Designing" onmouseover="this.src='images/nav_design_select.png'" onmouseout="this.src='images/nav_design.png'" /></a>
            <ul class="noJS">
               <li><a href="#">Hellenico</a></li>
               <li><a href="#">Genere</a></li>
               <li><a href="#">Indulgentia</a></li>
            </ul>
</li>
<li><a href="#"><img src="images/nav_services.png" border="0" alt="Services" onmouseover="this.src='images/nav_services_select.png'" onmouseout="this.src='images/nav_services.png'" /></a></li>
<li><a href="#"><img src="images/nav_goldbuy.png" border="0" alt="Gold Buying" onmouseover="this.src='images/nav_goldbuy_select.png'" onmouseout="this.src='images/nav_goldbuy.png'" /></a></li>
<li><a href="#"><img src="images/nav_learn.png" border="0" alt="Learn More" onmouseover="this.src='images/nav_learn_select.png'" onmouseout="this.src='images/nav_learn.png'" /></a></li>
<li><a href="#"><img src="images/nav_about.png" border="0" alt="About Us" onmouseover="this.src='images/nav_about_select.png'" onmouseout="this.src='images/nav_about.png'" /></a></li>
<li><a href="#"><img src="images/nav_contact.png" border="0" alt="Contact Us" onmouseover="this.src='images/nav_contact_select.png'" onmouseout="this.src='images/nav_contact.png'" /></a></li></ul>
</body>
</html>

Here is the CSS:

Hidden:

And here is the javascript:

Hidden:

1. I can't figure out why the list items are shifted over to the right like there's an invisible bullet there... this applies to the submenu too.
2. When I use width:100% for the background of the menu, it stretches out the page to the right side... Probably has sometime to do with the invisible bullets in problem #1.
3. I can't get the images/menu buttons centered in the page...

If anyone could be of assistance, it would be GREATLY appreciated.

Ventrue · **Posted:** April 5th, 2012, 6:34 pm

1. you need to add "padding-left: 0px;" to the css entry "#menu ul"
2. Same as 1, with "padding-left: 0px;" being added to the css entry "#menu"
3. The best way to do this is to first create a <div> around your menu. Give this the background image you desire. Then, set your menu to have the attributes "display: block" and "text-align: center;" which will center it within the div.

I made a quick example, which can be found here

If I may offer you a big suggestion, it would be to avoid using the css "float" attribute. It's a nasty little bugger, it is handled differently in browsers. It's much easier to work with "display: inline-block" instead, at least in my opinion.

Furthermore, I've found it useful to make drop-down menus separate from the menu itself, and create a simple javascript handler that will position the drop-down menus underneath the proper menu. Then, you can create a function for "onmouseover" events that displays the correct menu. I have an example for this too somewhere else, I'll see if I can find it.

Hope this helps.

P.S: If you have Google Chrome, you can use the developer tools that come with it to easily see changes to your page because you can edit the HTML, CSS, and Javascript code in-browser, and it'll automatically update your changes.

Demon · **Posted:** April 5th, 2012, 7:36 pm

I told you someone could help. also, this is a javascript menu, nota java menu. I would agree with the inlines, rather than floating. there are a few tricks using absolute positioning to hide them.. its mostly preference. It has the potential to be jumpy if you don't do it right, but it should be fine.

if I had access to the server id give you the menu I made for the homepage. Best of luck though!

Ventrue · **Posted:** April 5th, 2012, 7:53 pm

An important note is that whitespace does make a difference with "inline-block" elements. So make sure all top-level menu items are on one line with no spaces between them.

I wrote a quick and simple example of drop down menu code. I didn't combine it into a reusable javascript menu handler, but it should suffice for your understanding and simplicity. It includes a "timeout" variable so the menu won't disappear immediately after leaving the bounds of that menu item or dropdown menu.

Example

The solution above doesn't handle users resizing the page though. That can be fixed by applying a function that repositions all the dropdown menus when the page is resized.

You may want to check out these solutions.

reggie · **Posted:** April 9th, 2012, 2:02 pm

drop down menus browsing on a phone is a nightmare, Remember to make it phone compatible too

Demon · **Posted:** April 14th, 2012, 6:14 pm

Now that i use a fone as my only access point, i wish I had been in charge of the mobile runevillage initiative. X.x

Ventrue · **Posted:** April 20th, 2012, 12:50 am

*Sigh* I was actually somewhat excited to see a topic on coding/scripting, but there hasn't been any reply to my suggestions.

A5chow · **Posted:** April 22nd, 2012, 9:51 am

Sorry, guys! :angst:

I've been working on another urgent project at work and this has been placed on hold. I'll get back to it soon. Thank you very, VERY much for the suggestions, Ventrue, Reggie, and Demon. I really appreciate it. Will post my results here once I'm done

!

A5chow · **Posted:** May 1st, 2012, 1:51 pm

OKAY! So here's my futile attempt at Ventrue's dropdown menu example with using DIV's instead of lists.

It's doing something really funky with the submenu items, however.... I was fiddling with the absolute positions of each of the subitem menus but nothing appears to be moving.

Now what did I do wrong? Here's the uploaded version: http://silverbergandsons.com/beta/ventruemenu.htm

Thanks for your help, guys! Greatly appreciated!

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

        <title>Dropdown Menus on Centered "menu bar" example.</title>

        <style type="text/css">

            body, html {

                padding: 0px;

                margin: 0px;

                width: 100%;

                font-family: "Arial", sans-serif;

            }

            div.header {

                height: 157px;

                background-color: #111111;

                background-image:url('images/header_bg.png');
                background-repeat:repeat-x;
                text-align: center;

            }

            div.menu_wrapper {

                width: 100%;

                background-color: #111111;

                background-image:url('images/nav_bg.png');
                background-repeat:repeat-x;
            }

            div.menu {

                text-align: center;

            }

            div.menu div.item {

                margin: 0px;

                display: inline-block;

                text-align: center;

            }

            div.dropdown {

                background: #929292;
                border: 1px solid #626262;

            }

            div.dropdown div.item {

                color: #f2f2f2;

                margin: 2px;

                width: 100px;

                font-size: 12px;

                font-weight: bold;

                text-align: center;

            }

            div.dropdown.hidden {

                display: none !important;

            }

        </style>

        <script src="./Dropdown Menus on Centered  menu bar  example._files/jquery.min.js" type="text/javascript"></script><style type="text/css"></style>

        <script language="javascript">

            init_dropdowns = function() {

                $("div.dropdown").addClass("hidden");
 //Hide the dropdown menus.

            }
 
            //Menu watcher.  
               var menu_watch = {

                current: false, //Current menu

                timeout: 0 //Pointer to timeout object.

            }

            /* Show/hide dropdowns */
 
           activate_dropdown = function(div) {

                //If we're going to a different dropdown menu, then automatically close previous menu.

                if (menu_watch.current && menu_watch.current != div) {

                    deactivate_dropdown(menu_watch.current);

                }

                menu_watch.current = div;
                
                clearTimeout(menu_watch.timeout); 
//Cancel any current "timeout" for dropdown.

                div.removeClass("hidden");
            }

            deactivate_dropdown = function() {

                //if (menu_watch.active == 1) return;

                menu_watch.current.addClass("hidden");

                menu_watch.current = 0;
            }

            /* Attach dropdown event to menu items */

            $.fn.attach_dropdown = function(div) {

                div = $(div); //Guarantee jQuery selector.

                var _this = $(this); 
//Get the jQuery selector for the parent.

                var _both = $(this).add(div);

                var parent_pos = _this.position();

                div.css({

                   position: "absolute",

                   top: parent_pos.top + _this.height() + 2, //+ 2 is for margins. Adjust as needed.

                   left: parent_pos.left
                });

                //Add event handlers to each element.

                _both.bind('mouseover', function(){

                    activate_dropdown(div);

                });

                _both.bind('mouseout', function() {

                    //By setting a timeout, it gives the user time to react to leaving

                    //The particular dropdown menu.

                    menu_watch.timeout = setTimeout(function() {

                        deactivate_dropdown();

                    }, 500);

                });
                                                
                return _this; //For jQuery chaining.

            }

            $(document).ready(function() {

                init_dropdowns();

                for (var i = 1; i < 5; i++) {

                    $("#item" + i).attach_dropdown("#item" + i + "_dropdown");

                }

            });

        </script>

    </head>

    <body>

        <div class="header"><img src="images/header_logo.png" alt="Welcome to S. Silverberg & Sons Jewelers"></div>

        <div class="menu_wrapper">

            <div class="menu">

                <div id="item1" class="item"><a href="#"><img src="images/nav_jewelry.png" border="0" alt="Jewelry" onmouseover="this.src='images/nav_jewelry_select.png'" onmouseout="this.src='images/nav_jewelry.png'" /></a></div><div id="item2" class="item"><a href="#"><img src="images/nav_diamonds.png" border="0" alt="Diamonds" onmouseover="this.src='images/nav_diamonds_select.png'" onmouseout="this.src='images/nav_diamonds.png'" /></a></div><div id="item3" class="item"><a href="#"><img src="images/nav_design.png" border="0" alt="Custom Designing" onmouseover="this.src='images/nav_design_select.png'" onmouseout="this.src='images/nav_design.png'" /></a></div><div id="item4" class="item"><a href="#"><img src="images/nav_services.png" border="0" alt="Services" onmouseover="this.src='images/nav_services_select.png'" onmouseout="this.src='images/nav_services.png'" /></a></div><div id="item5" class="item"><a href="#"><img src="images/nav_goldbuy.png" border="0" alt="Gold Buying" onmouseover="this.src='images/nav_goldbuy_select.png'" onmouseout="this.src='images/nav_goldbuy.png'" /></a></div><div id="item6" class="item"><a href="#"><img src="images/nav_learn.png" border="0" alt="Learn More" onmouseover="this.src='images/nav_learn_select.png'" onmouseout="this.src='images/nav_learn.png'" /></a></div><div id="item7" class="item"><a href="#"><img src="images/nav_about.png" border="0" alt="About Us" onmouseover="this.src='images/nav_about_select.png'" onmouseout="this.src='images/nav_about.png'" /></a></div><div id="item8" class="item"><a href="#"><img src="images/nav_contact.png" border="0" alt="Contact Us" onmouseover="this.src='images/nav_contact_select.png'" onmouseout="this.src='images/nav_contact.png'" /></a></div>
            </div>

            <div id="item1_dropdown" class="dropdown hidden" style="position: absolute; top: 291px; left: 100px; ">

                <div class="item">Subitem 1</div>

                <div class="item">Subitem 2</div>

                <div class="item">Subitem 3</div>

            </div>

            <div id="item2_dropdown" class="dropdown hidden" style="position: absolute; top: 591px; left: 579px; ">

                <div class="item">Subitem 1</div>

                <div class="item">Subitem 2</div>

                <div class="item">Subitem 3</div>

            </div>
            
            <div id="item3_dropdown" class="dropdown hidden" style="position: absolute; top: 591px; left: 683px; ">

                <div class="item">Subitem 1</div>

                <div class="item">Subitem 2</div>

                <div class="item">Subitem 3</div>

                <div class="item">Subitem 4</div>
                
            </div>

            <div id="item4_dropdown" class="dropdown hidden" style="position: absolute; top: 591px; left: 787px; ">

                <div class="item">Subitem 1</div>

                <div class="item">Subitem 2</div>

                <div class="item">Subitem 3</div>

                <div class="item">Subitem 4</div>

                <div class="item">Subitem 5</div>
                
                <div class="item">Subitem 6</div>
                
            </div>
                        
        </div>

</body>
</html>

Ventrue · **Posted:** May 2nd, 2012, 9:43 pm

Code: Select all

 <script src="./Dropdown Menus on Centered  menu bar  example._files/jquery.min.js" type="text/javascript"></script><style type="text/css"></style>

This needs to point to the location of the jquery javascript file on your host. jQuery is a javascript library that makes javascript much easier to use.

1. Download jquery from http://jquery.com
2. Put it on the web server in a location you desire. I usually place my scripts in a folder called 'scripts'.
3. Change the line shown above to something along the lines of:

Code: Select all

 <script src="FOLDER_NAME_HERE/jquery.js" type="text/javascript"></script><style type="text/css"></style>

So, if you place it in the html's home director, you can simply put for the src attribute, src="jquery.js"

A5chow · **Posted:** May 2nd, 2012, 11:30 pm

Ooh, I see. Thanks, Ventrue! Missed that part.

EDIT: Okay, I've uploaded it to the main directory, changed the source location and the sub menus are appearing funnily in the center of the main menu as opposed to where I mapped their positions. Why is that so?

Refresh http://silverbergandsons.com/beta/ventruemenu.htm

Ventrue · **Posted:** May 3rd, 2012, 5:04 pm

A5chow wrote:

Ooh, I see. Thanks, Ventrue! Missed that part.

EDIT: Okay, I've uploaded it to the main directory, changed the source location and the sub menus are appearing funnily in the center of the main menu as opposed to where I mapped their positions. Why is that so?

Refresh http://silverbergandsons.com/beta/ventruemenu.htm

EDIT: Try changing

Code: Select all

$(document).ready(function(){

to

Code: Select all

$(window).load(function(){

A5chow · **Posted:** May 5th, 2012, 4:33 pm

Hurray! That worked! I guess I can remove the absolute positions too.

However, it appears funnily for IE...

And I'm not quite sure why the 5th to 8th sub menus don't appear. I tried studying the Java Javascript thinking that it's a matter of modifying some of the values, but that's not the case. And not all of the buttons will have a scroll down menu though.

Thank you again and again for your help, Ventrue.

Ventrue · **Posted:** May 5th, 2012, 6:01 pm

A5chow wrote:

Hurray! That worked! I guess I can remove the absolute positions too.

However, it appears funnily for IE...

IE is always a pain to get working properly. In the css for "div.item" change "display: inline-block" to "display: inline".

A5chow wrote:

And I'm not quite sure why the 5th to 8th sub menus don't appear. I tried studying the Java thinking that it's a matter of modifying some of the values, but that's not the case. And not all of the buttons will have a scroll down menu though.

First of all, it's not Java. It's Javascript. I know that seems like a minor difference, but they're really two completely different beasts. I only correct you in case you need help in the future.

It actually is part of the Javascript. In the $(window).load() function, there's this line:

Code: Select all

for (var i = 1; i < 5; i++) {

Change the 5 to 9. It's a for loop that iterates through every possible item. Another solution that may work for you is:

Code: Select all

for (var i = 1; i < $('div[id*=item].item').length; i++) {

This checks for the number of "div" tags that have the class property "item" as well as an id property starting with "item".

A5chow wrote:

Thank you again and again for your help, Ventrue.

You're more than welcome.

A5chow · **Posted:** May 5th, 2012, 6:09 pm

Oops, hehe, I have no idea why I keep saying "Java". I've been told too many times to stop doing that.

I've corrected it in my original post!

The menu works fabulously in both Chrome and IE! I'm so happy. You have no idea how long I've been working on this menu issue... Trying so many different tutorials and examples.

YOU'RE THE BEST, VENTRUE. :love:

A5chow · **Posted:** May 16th, 2012, 12:25 pm

Okay, so my next step was to make a slideshow and I followed one of the examples online. However, I'm assuming that because the example used "position:absolute;" it appears on top of Ventrue's menu.

Is there a way to fix it without having to use another javascript slideshow?

Here it is live: http://silverbergandsons.com/beta/

And here's the code:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

<title>S. Silverberg &#38; Sons Jewelers - Tucson, Arizona - Custom design your own unique and original engagement ring, wedding band, bridal set, or other fine jewelry.</title>
<meta  name="description"  content="S. Silverberg &#38; Sons Jewelers - Custom design your own unique and original engagement ring, wedding band, bridal set, or other fine jewelry."  />
<meta  name="keywords"  content="silverberg, sons, tucson, arizona, jewelers, jeweler, jewelry, store, stores, engagement, wedding, bridal, anniversary, ring, rings, band, bands, set, sets, custom, design, designed, designing, diamond, diamonds, gift, gifts, gem, gems, gemstone, gemstones, precious stones, birthstones, bracelet, bracelets, pendant, pendants, necklace, necklaces, earring, earrings, gold, platinum, estate, estates, buy, sell, repair, repairs, appraisal, appraisals, appraiser, insurance, watch, watches, seiko, men, ladies "  />
<style type="text/css">

            body, html {

                padding: 0px;

                margin: 0px;

                background-color: #111111;

                width: 100%;

                font-family: Arial, sans-serif;

            }

            div.header {

                height: 157px;

                background-image:url('images/header_bg.png');
                background-repeat:repeat-x;
                text-align: center;

            }

            div.menu_wrapper {

                width: 100%;

                background-image:url('images/nav_bg.png');
                background-repeat:repeat-x;
            }

            div.menu {

                text-align: center;

            }

            div.menu div.item {

                margin: 0px;

                display: inline;

                text-align: center;

            }

            
            div.dropdown {

                background: #2e2e2e;
                border: 1px solid #111111;

            }

            
            div.dropdown div.item {

                margin: 2px;

                width: 125px;

                text-align: left;


            }

            
            div.dropdown div.item a:link {color:#FFFFFF;
                font-size: 11px;

                font-weight: none;

                font-family: Georgia;
text-decoration:none;
}
            
            div.dropdown div.item a:visited {color:#FFFFFF;
                font-size: 11px;

                font-weight: none;

                font-family: Georgia;
text-decoration:none;
}
            
            div.dropdown div.item a:hover {color:#f0bd66;
                font-size: 11px;

                font-weight: none;

                font-family: Georgia;
text-decoration:none;
}
            
            div.dropdown div.item a:active {color:#FFFFFF;
                font-size: 11px;

                font-weight: none;

                font-family: Georgia;
text-decoration:none;
}
            
            div.dropdown.hidden {

                display: none !important;

            }

            div.body_wrapper {

                background-image:url('images/main_bg.png');
                background-repeat:repeat-x;
                width: 100%;

            }

            div.body {

margin-left:auto;
margin-right:auto;
                width: 860px;
            }

                div.body div.table { 
                border: 10px solid #111111;
                background: #000000;
                border-top:none; 
}
                div.body div.footer { 
                text-align: center;

                font-family: Georgia;
                font-size: 10px;

                color: #ffffff;

}
                .main{
                font-family: Trebuchet MS, Tahoma, Verdana, Arial;
                color: #FFFFFF;
                font-size: 13px;
                border: none;
                width: 100%;
}
.header1{
                font-family: Georgia;
                color: #f0bd66;
                font-size: 26px;
                font-weight: bold;


}

/*** set the width and height to match your images **/

#slideshow {
    position:relative;
    height:400px;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}

#slideshow IMG.active {
    z-index:10;
    opacity:1.0;
}

#slideshow IMG.last-active {
    z-index:9;
}

        </style>

        <script src="jquery-1.7.2.min.js" type="text/javascript"></script><style type="text/css"></style>

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

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

    </head>

    <body>

        <div class="header"><a href="http://silverbergandsons.com/"><img src="images/silverberg.png" alt="Welcome to S. Silverberg & Sons Jewelers" border="0"></a></div>

        <div class="menu_wrapper">

            <div class="menu">

                <div id="item1" class="item"><a href="#"><img src="images/nav_jewelry.png" border="0" alt="Jewelry" onmouseover="this.src='images/nav_jewelry_select.png'" onmouseout="this.src='images/nav_jewelry.png'" /></a></div><div id="item2" class="item"><a href="#"><img src="images/nav_diamonds.png" border="0" alt="Diamonds" onmouseover="this.src='images/nav_diamonds_select.png'" onmouseout="this.src='images/nav_diamonds.png'" /></a></div><div id="item3" class="item"><a href="#"><img src="images/nav_design.png" border="0" alt="Custom Designing" onmouseover="this.src='images/nav_design_select.png'" onmouseout="this.src='images/nav_design.png'" /></a></div><div id="item4" class="item"><a href="#"><img src="images/nav_services.png" border="0" alt="Services" onmouseover="this.src='images/nav_services_select.png'" onmouseout="this.src='images/nav_services.png'" /></a></div><div id="item5" class="item"><a href="#"><img src="images/nav_goldbuy.png" border="0" alt="Gold Buying" onmouseover="this.src='images/nav_goldbuy_select.png'" onmouseout="this.src='images/nav_goldbuy.png'" /></a></div><div id="item6" class="item"><a href="#"><img src="images/nav_learn.png" border="0" alt="Learn More" onmouseover="this.src='images/nav_learn_select.png'" onmouseout="this.src='images/nav_learn.png'" /></a></div><div id="item7" class="item"><a href="#"><img src="images/nav_about.png" border="0" alt="About Us" onmouseover="this.src='images/nav_about_select.png'" onmouseout="this.src='images/nav_about.png'" /></a></div><div id="item8" class="item"><a href="#"><img src="images/nav_contact.png" border="0" alt="Contact Us" onmouseover="this.src='images/nav_contact_select.png'" onmouseout="this.src='images/nav_contact.png'" /></a></div>
            </div>

            <div id="item1_dropdown" class="dropdown hidden">

                <div class="item"><a href="#">Engagement Rings</a></div>

                <div class="item"><a href="#">Wedding Bands</a></div>

                <div class="item"><a href="#">Bridal Sets</div>

                <div class="item"><a href="#">Necklace &#38; Pendants</a></div>
                <div class="item"><a href="#">Bracelets</a></div>

                <div class="item"><a href="#">Earrings</a></div>

            </div>

            
            <div id="item2_dropdown" class="dropdown hidden">

                <div class="item"><a href="#">Diamond Cut</a></div>

                <div class="item"><a href="#">Diamond Clarity</a></div>

                <div class="item"><a href="#">Diamond Color</a></div>

                <div class="item"><a href="#">Carat Weight</a></div>
                <div class="item"><a href="#">Certificates</a></div>
                
            </div>

            <div id="item4_dropdown" class="dropdown hidden">

                <div class="item"><a href="#">Custom Designing</a></div>

                <div class="item"><a href="#">In-Store Consultation</a></div>

                <div class="item"><a href="#">Jewelry Repair</a></div>

                <div class="item"><a href="#">Jewelry & Estate Appraisals</a></div>

                <div class="item"><a href="#">Watch Repair</a></div>

                <div class="item"><a href="#">Check & Clean</a></div>
                
            </div>
            
            <div id="item6_dropdown" class="dropdown hidden">

                <div class="item"><a href="#">Jewelry Care</a></div>

                <div class="item"><a href="#">Ring Sizes</a></div>

                <div class="item"><a href="#">Birthstones</a></div>

                
            </div>

                        
        </div>

        <div class="body_wrapper">
<div class="body"><div class="table">
<div id="slideshow">
    <img src="image1.jpg" alt="Slideshow Image 1" class="active" />
    <img src="image2.jpg" alt="Slideshow Image 2" />
</div>
</div>
<div class="footer">
<br />
<br />
<a href="#"><img src="images/facebook_dark.png" border="0" alt="Facebook" onmouseover="this.src='images/facebook.png'" onmouseout="this.src='images/facebook_dark.png'" /></a>
&nbsp;
&nbsp;
&nbsp;
<a href="#"><img src="images/twitter_dark.png" border="0" alt="Facebook" onmouseover="this.src='images/twitter.png'" onmouseout="this.src='images/twitter_dark.png'" /></a>
&nbsp;
&nbsp;
&nbsp;
<a href="#"><img src="images/google_dark.png" border="0" alt="Facebook" onmouseover="this.src='images/google.png'" onmouseout="this.src='images/google_dark.png'" /></a>
<br />
<br />
Copyright &copy; 2012 S. Silverberg & Sons, Inc.
<br />
<br />
</div>
</div>


</div>
</body>
</html>

Thank you very much in advance! :^_^:

P.S. Please ignore the sloppiness of the code, I'll be fixing that later.

Ventrue · **Posted:** May 30th, 2012, 1:11 am

Posting to let you know that I'm taking a look at it when I have some spare time between classes tomorrow.

EDIT: It's actually pretty simple. The slideshow snippet you use uses a property called z-index, which allows you to order the rendering of overlapping containers. A higher z-index equates to a higher priority. Add this to your CSS:

Code: Select all

div.dropdown, div.dropdown div.item {
         z-index: 15;
}

This will render dropdown menus and their items above the slideshow.

A5chow · **Posted:** May 30th, 2012, 1:35 pm

WOOP! I love you.

Need help with drop-down javascript menu

Who is online