Smooth Navigation Menu Overlaping Items?

[kohnency]

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


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

3) Describe problem: The first item on my navigation bar seems to cover up the item to the right (and this continues to happen through the rest of my bar). The submenus are not effected though. I have this issue for all browsers, but things look fine when the capatability view is on in IE8.

This is the first site I've ever built, so I'm pretty new to all of this. If I'm not making sense you can check out what I'm working on at http://webtest.meredith.edu/acp11/

[jscheuer1]

I see two choices either of which appear to work.

You have descending z-index values. If you make them ascending, that would work.

You could do that. But simpler would be to remove all the z-index values and remove the width: 100% from here:

.ddsmoothmenu{
font: bold 20px Century Gothic;
background: #296DC1; /*background of menu bar (default state)*/
width: 100%;
}

at the beginning of the ddsmoothmenu.css file.

[kohnency]

Thanks it worked!

[kohnency]

Two more quick questions....is there a way to make the highlight smaller when I rollover "ACP Home"? The highlight goes all the way to the end of the navbar and I would like it to look more like the highlight on "Alumnae."

Is there a way to make the submenu a different color? (For example after hovering on student>academic planning & support I would like the menu with "new student" "current student" etc. to be a different color.

[jscheuer1]

First question, I'm not seeing it. Which browser?

Second question, add the highlighted as shown in the ddsmoothmenu.css file:

/*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 12px Century Gothic;
width: 160px; /*width of sub menus*/ 
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 0px solid gray;
}

/*All subsequent sub menu levels link styles after 1st level sub menu */
.ddsmoothmenu ul li ul li ul a {
background-color: red;
}

/* 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: absol . . .

You may use any valid css color value in place of red. Within reason you may add other property value pairs there for those links.

[kohnency]

In IE8 and Firefox the light blue highlight on "ACP Home" goes all the way off the dark blue nav bar.

Thanks for the code!

[jscheuer1]

I just tested the webtest.meredith.edu/acp11/ page in Firefox 4.0.1 and in IE 8. Still not happening here.

However both browsers throw an error on:

<script type="text/javascript">
//Call dropdowncontent.init("anchorID", "positionString", glideduration, "revealBehavior") at the end of the page:

dropdowncontent.init("searchlink", "right-bottom", 500, "mouseover")
dropdowncontent.init("contentlink", "left-top", 300, "click")

</script>

I think that's left over from a script you are no longer using. If so, get rid of it.

You should also get rid of this:

ddsmoothmenu.init({
	mainmenuid: "smoothmenu2", //Menu DIV id
	orientation: 'v', //Horizontal or vertical menu: Set to "h" or "v"
	classname: 'ddsmoothmenu-v', //class added to menu's outer DIV
	//customtheme: ["#804000", "#482400"],
	contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})

You're not using it. You only have the one ddsmoothmenu, the one with the mainmenuid of smoothmenu1.

Both browsers are throwing an error on it:

Error: $mainmenu.parent().get(0) is undefined
Source File: webtest.meredith.edu/acp11/ddsmoothmenu.js
Line: 52

Hard to track back to that, but that's what's causing it.

[kohnency]

alrighty...thanks!