Drop-down menus not showing

[btvbill]

1) Script Title: Smooth Navigational Menu (v1.5)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...smoothmenu.htm

3) Describe problem: Having problems with drop-down menus hiding behind jQuery.

I'm having problems with drop-down menus disappearing (probably behind some jQuery code). The arrows show up but no links. In Firefox 5 and IE9, the drop-downs show up under About Us but nowhere else. In Google Chrome, the drop-downs show up under "About Us" and "Products & Services".

Here are the examples:

http://www.alpinewebmedia.com/demo2/index.html
http://www.alpinewebmedia.com/demo2/products.html

[jscheuer1]

Playing a little fast and loose with the css there, eh?

Revert to the default and add/change the highlighted:

.ddsmoothmenuc{
background: #414141; /*background of menu bar (default state)*/
}
.ddsmoothmenu{
font: bold 12px Verdana;
background: #414141; /*background of menu bar (default state)*/
margin: 0 auto;
width: 960px; /* change this to the width of your menu */
}
.ddsmoothmenu ul{
z-index:100;
margin: 0;
padding: 0;
list-styl . . .

And put a div around the menu div:

<!-- Start Navigation -->
<div class="ddsmoothmenuc">
<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">About Us</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub It . . . 
 . . . b Item 3.1.1.5</a></li>
		</ul>
    </li>
    </ul>

  </li>
  </ul>
</li>
</ul>
<br style="clear: left" />
</div>
</div>
<!-- End navigation -->

That's it!

[btvbill]

Thanks John. It's still not working right though. I even put the menu default code back in along with your suggestions and no luck. I put everything back to default along with your code fix but if you look at http://www.alpinewebmedia.com/demo2/test.html or http://www.alpinewebmedia.com/demo2/index.html under Folder 2 you will see the arrow showing up but no links.
I've tried it in FF5, IE9 and Google Chrome.

[jscheuer1]

You have not reverted to the default css. You did add my changes/additions. Here, use this as your ddsmoothmenu.css file:

.ddsmoothmenuc{
background: #414141; /*background of menu bar (default state)*/
}

.ddsmoothmenu{
font: bold 12px Verdana;
background: #414141; /*background of menu bar (default state)*/
margin: 0 auto;
width: 960px; /* change this to the width of your menu */
}

.ddsmoothmenu ul{
z-index:100;
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.ddsmoothmenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.ddsmoothmenu ul li a{
display: block;
background: #414141; /*background of menu items (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}

* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{
color: white;
}

.ddsmoothmenu ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/
background: black; 
color: white;
}

.ddsmoothmenu ul li a:hover{
background: black; /*background of menu items during onmouseover (hover state)*/
color: white;
}
	
/*1st sub level menu*/
.ddsmoothmenu ul li ul{
position: absolute;
left: 0;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

/* Holly Hack for IE \*/
* html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/


/* ######### CSS classes applied to down and right arrow images  ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

/* ######### CSS for shadow added to sub menus  ######### */

.ddshadow{ /*shadow for NON CSS3 capable browsers*/
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
background: silver;
}

.toplevelshadow{ /*shadow opacity for NON CSS3 capable browsers. Doesn't work in IE*/
opacity: 0.8;
}

The markup you had before was fine, it just needed the container which I see you added. In fact, most of what you had was working OK before. I only told you to revert the css and add those few things to it and the container div to the markup. What you've done now is change the order of the scripts and add in stuff that you didn't have before, like a second ddsmoothmenu.init that you're not using.

[btvbill]

Thanks John. It's working now. I appreciate your help.