Drop downs not working - HELP!

My drop down menus aren’t working. As I am not a developer or web designer, I don’t have a clue as to where to start looking for an answer. The URL is www.radley.com/barcoding-rfid.html. Hovering over the menus works, but it won’t let me select from the drop down.

There is a slight gap between the menu headers and the drop down, to the menu loses hover status when the cursor crosses the gap.
You could nudge the drop down up a little to close the gap.
In styleMM.css on line 563, on the selector sf-menu li:hover ul change the top value from 50px to about 45px.

1 Like

Hi,

You have a few issues that need sorting. Either add this css at the end of the css file or integrate it in the right places (if you are confident).

.sf-menu li:hover ul, .sf-menu li.sfHover ul {top:100%}/* was 50px */
.sf-menu a{display:block}
.sf-menu ul a{white-space:normal;line-height:1.2;}
.sf-menu li li:first-child {margin-top:0}

You also had an issue with text sticking out of the dropdown which the above fixes.

1 Like

It’s better not to use magic numbers to fix this as the distance should always be 100% for a perfect fit no matter the menu height.:slight_smile:

so I should change it to 100%?

Yes, mine was a rushed response, without thinking it through.:smiley:

Yes but you need all my fixes above because you are dragging the menu back upwards by 13px with a margin on the first child and 100% - 13px is not where the menu needs to be. Use all my code and the menu will work and look better and the dropdowns won;t be broken either :slight_smile:

1 Like

Ok. I’m putting the code at the end of the CSS after the final } right?? That’s the final } that is red and bolded.

It may be better to find those selectors in the css if they already exist, and edit them to those values.

Yes, that will work if you are not confident with integrating the code into the existing rules.

As Sam said above the best option is to integrate the code into the original styles so if you want to brush up your skills then have a go at integrating it yourself:) (make sure you keep a back-up of the css first).

Ok. I just put the code at the end of the CSS. It’s better–I can get to the drop downs. However, the hover isn’t working. I want the drop down options to appear when I hover over the main menu. A couple of the menus have a link at the top item, so I can’t click on it to get to the drop downs or it links me to another page.

I;m not seeing the code on the live site yet?

[quote] It’s better–I can get to the drop downs. However, the hover isn’t working.
I want the drop down options to appear when I hover over the main menu
[/quote]

If you can get to the dropdowns then the hover must be working?

I’m a little confused as to what you mean?

This is what your page will look like with the code I gave you added.

For example, to see the list under the PRODUCTS heading, I have to click on PRODUCTS. That’s fine for that menu. However, under the HARDWARE heading, the word HARDWARE links to its own page, so if I click on HARDWARE it sends me away to another page before I can view the drop down menu.

I haven’t updated the code on the live site yet. I’m working in the Preview site. I want to get it working there first before changing anything else on the live site.

You don’t have to click anywhere as this is a hover menu?

If you are talking about touch devices then you should not make the top level go anywhere if it has a sub menu. Simply include that choice as the first item in the sub menu.

1 Like

Oooh. That’s a great point I didn’t think about! I’ll make that change.

Thank you both so much for helping me. There is no way I could have figured this out on my own! :smile:

another issue…I’m not seeing the second level of menus under MES|WMS Solutions

You haven’t updated the live page yet so we can’t test what you have broken since the last incarnation :smile:

However if you look at my screenshot in post #13 you can see that the third level is displaying fine.

I moved this page live. Go to www.radley.com/supplychainsolutions.html

It seems like if I click on the very right edge of the menu, the third level will appear–but not if I just hover.

That menu is a click menu unlike the other page you linked to which was a hover menu?

You will need to remove the destination from the sub menu oltherwise it will try and travel to the target,

e.g.

<li><a href="#">MES | WMS Solutions</a>