Spry Menu Bar submenus don't stay open to click in IE7

**monta17** · May 14, 2012 05:39

I'm using the Adobe Spry Menu Bar 2.0 widget in Dreamweaver CS 5.5. It works and looks great in Firefox, Safari, and IE 9. However in IE 7 you have to rollover just the right part of the drop down menu (such as the word itself) for the submenu to appear, then it won't stay open long enough to get over to it and chose an item to click on (not unless you are very fast and very lucky).

A lot of our dealers use older versions of browsers and unless I can get this figured out, I'll have to redo the entire nav using something else.
Can anyone help?

Here is a link to the site (in progress). The only pages I have done are:
Vertical Lifts (under Products, then Lifts)
Dock (under Products, then Dock Systems)
Manuals (under Owners)

http://www.lakeshoreproducts.com/barbara/index.html

OR... If there is a better menu to use that will work across all browsers and that I can configure to look like (or look similar) to the one I have, please let me know. This is only my second dreamweaver site and I no nothing about jquery, javascript, ajax or any of that, which is why I was trying to use a widget which was already made. Thanks.

**ralph.m** · May 14, 2012 07:27

Hi monta17. Welcome to the forums.

Unfortunately, such tools create a lot of horrid code to achieve their effects (although at least the menu is navigable via the keyboard, which is a plus).

Here is a nice example of how cleanly this can be done with CSS alone:

http://www.pmob.co.uk/temp/drop-down-basic-good.htm

It wouldn't be hard to replace your current code with this, and you can then break free from Dreamweaver! Win win.

**monta17** · May 14, 2012 07:54

Thanks for the advice.
I might give this a try.
This the code as I see it in Firefox (is this a good starting point to use and to try to modify it from there? or should I start with something else?)"

body {
font: normal 11px verdana;
}
ul#nav, ul#nav ul {
margin: 0;
padding: 0;
list-style: none;
}
ul#nav li {
position: relative;
float: left;
width:149px;
}
#nav li ul {
position: absolute;
left: 0;
top: auto;
margin-left:-999em;
}
#nav li li{width:149px;}
#nav li ul ul{
position: absolute;
left:100%;
top: -.1em;
margin-left:-999em;
}

/* Styles for Menu Items */
ul#nav li a {
display: block;
text-decoration: none;
color: #777;
background: #fffccc; /* IE6 likes a background here */
padding: 5px;
border: 1px solid #ccc;
zoom:1.0;
}

/* this sets all hovered lists to red */
#nav li:hover a, #nav li.over a, #nav li:hover li:hover a, #nav li.over li.over a, #nav li:hover li:hover li:hover a, #nav li.over li.over li.over a, #nav li:hover li a:hover, #nav li.over li a:hover, #nav li:hover li:hover li:hover a:hover, #nav li.over li li a:hover, #nav li:hover li:hover li:hover li:hover a:hover, #nav li.over li.over li.over li.over a:hover {
color: #fff;
background-color: red;
}
/* set dropdown to default */
#nav li:hover li a, #nav li.over li a, #nav li:hover li:hover li a, #nav li.over li.over li a, #nav li:hover li:hover li:hover li a, #nav li.over li.over li.over li a {
color: #777;
background: #fffccc;
}
#nav li ul li a {
padding: 4px 5px;
} /* Sub Menu Styles */
ul#nav li:hover ul ul, ul#nav li:hover ul ul ul, ul#nav li.over ul ul, ul#nav li.over ul ul ul {
margin-left:-999em;
}
ul#nav li:hover ul, ul#nav li li:hover ul, ul#nav li li li:hover ul,u#navl li li li li:hover ul, ul#nav li.over ul, ul#nav li li.over ul, ul#nav li li li.over ul {
margin-left:0;
}

**monta17** · May 14, 2012 14:19

Ok.
I've tried to use the css example you gave me and have come up with this so far:

http://www.lakeshoreproducts.com/barbara/nav2.html

What I CAN'T figure out is how to change the width of the second level of submenus (not sure what you call these). For example the submenu that come out when you click on "Lifts" and "Dock Systems" (under "PRODUCTS"). Right now they are the same width as the top nav items, which when they appear end up looking like they are under the "OWNERS" section.
Now sure if I'm explaining this right.
Please let me know how to change this if you will.
Here is the css I have:

#nav {
/* [disabled]background-color: #FC9; */
/* [disabled]height: 300px; */
width: 960px;
}

ul#nav, ul#nav ul {
margin: 0;
padding: 0;
list-style: none;
}
ul#nav li {
position: relative;
float: left;
width:240px;
background-color: #79cdd1;
}
#nav li ul {
position: absolute;
left: 0;
top: auto;
margin-left:-999em;
}
#nav li li{
width:240px;
}
#nav li ul ul{
position: absolute;
left:100%;
top: -.1em;
margin-left:-999em;
}

/* Styles for Menu Items */
ul#nav li a {
display: block;
text-decoration: none;
color: #FFF;
/* [disabled]background: #79cdd1; */
zoom:1.0;
border-right-width: 1px;
border-right-style: solid;
/* [disabled]border-right-color: #F00; */
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
height: 20px;
padding-top: 70px;
padding-right: 15px;
padding-bottom: 10px;
text-align: right;
letter-spacing: 0.5pt;
/* [disabled]border-bottom-width: 1px; */
/* [disabled]border-bottom-style: solid; */
width: auto;
}

/* this sets all hovered lists to red */
#nav li:hover a, #nav li.over a, #nav li:hover li:hover a, #nav li.over li.over a, #nav li:hover li:hover li:hover a, #nav li.over li.over li.over a, #nav li:hover li a:hover, #nav li.over li a:hover, #nav li:hover li:hover li:hover a:hover, #nav li.over li li a:hover, #nav li:hover li:hover li:hover li:hover a:hover, #nav li.over li.over li.over li.over a:hover {
/* [disabled]color: #666; */
background-color: #7bafde;
/* [disabled]width: 180px; */
}
/* set dropdown to default */
#nav li:hover li a, #nav li.over li a, #nav li:hover li:hover li a, #nav li.over li.over li a, #nav li:hover li:hover li:hover li a, #nav li.over li.over li.over li a {
color: #333;
background-color: #FFFFFF;
text-align: left;
font-size: 12px;
border: thin solid #cccccc;
letter-spacing: normal;
height: 15px;
}
#nav li ul li a {
padding: 4px 5px;
} /* Sub Menu Styles */
ul#nav li:hover ul ul, ul#nav li:hover ul ul ul, ul#nav li.over ul ul, ul#nav li.over ul ul ul {
margin-left:-999em;
}
ul#nav li:hover ul, ul#nav li li:hover ul, ul#nav li li li:hover ul,u#navl li li li li:hover ul, ul#nav li.over ul, ul#nav li li.over ul, ul#nav li li li.over ul {
margin-left:0;
}

**ralph.m** · May 14, 2012 16:40

What you have now looks great to me, so well done. But if you want to target specific levels of the menu, you can do something like this:

For the first drop down level:

Code:

#nav li li  {width: 300px;}

and for the next level:

Code:

#nav li li li  {width: 100px;}

etc. At the moment, in Firefox, each level is the same width, and it looks good that way to me. Are you seeing something different in another browser?

**monta17** · May 15, 2012 04:46

Thanks!
You have been so much help.
This is where I'm at now...
http://www.lakeshoreproducts.com/barbara/nav2.html

One last thing. Is there anyway to insert the little black arrows (gifs) that were in the original example (instead of the two small arrow things) indicating the drop down menus? (original example for reference: http://www.lakeshoreproducts.com/barbara/index.html

If not, it will be fine as it is.
Thanks again.

**ralph.m** · May 15, 2012 06:17

Originally Posted by monta17

Is there anyway to insert the little black arrows (gifs) that were in the original example

Yes, no problem at all. Just do what's done on the Spry version, adding the arrow as a background image. for example, on the top level links, do something ike this:

Code:

#nav li a {background: url("Spry-UI-1.7/css/Menu/basic/images/ArrowMenuDown.gif") no-repeat right 85px;}

Of course, you should move the background image to a more obvious location, like your images folder, so you'll need to change that file path.

For the other links, remove the » from the HTML and also put in a background image on selected links, perhaps via a special class. E.g.:

Code:

<a class="sub" href="#">Lifts »</a>

Code:

#nav li li a.sub {background: url("Spry-UI-1.7/css/Menu/basic/images/ArrowMenuRight.gif") no-repeat right 50%;}

Also, you'll probably need to add a bit of padding for any links with an arrow to make room for the arrow, which is added in the padding area as a background image.

**monta17** · May 15, 2012 09:03

Well, I didn't quite put in exactly what you said (because I couldn't figure it out), but I think I got the drift and did manage to modify a few settings and create a class, it works as far as I can tell.
Let me know if you see anything wrong.
And thanks a bunch for all your help!!!
I think I'm finally "there".
http://www.lakeshoreproducts.com/barbara/index.html

cheers!

**ralph.m** · May 15, 2012 17:15

Originally Posted by monta17

I didn't quite put in exactly what you said (because I couldn't figure it out), but I think I got the drift and did manage to modify a few settings and create a class

For someone who didn't understand, you made a jolly good fist of it! Well done, looks perfect to me. And now you've got a much cleaner and easy-to-manage menu than before. Well done.

**monta17** · May 16, 2012 04:34

to: Ralph.m
Since you've been such a help with this I would like to ask about an accordion spry menu I have on another website, but I'm thinking I should start a new thread for that issue. Is that right?