下拉导航CSS问题

Question

new to this board, please bear with me.

I've seen a lot of similar threads to my issue but I still can't find a solution so I decided to see if I could get some help here.

The majority of the code was done by someone else -- I'm not a coder / developer by any means so I'm basically doing damage control with my limited knowledge. If you look at the CSS you'll see that the guy did a sloppy job.

Here's a link to one of the pages: http://bumbu.com/recipes.php -- but the issue applies to the whole site. It is regarding the navigation, and is in the style.css (line 108-231) (possibly the header html as well)

Issues:

1. There are two dropdowns - one under 'the Blend' and one under 'Cocktails', when you mouse on the Blend dropdown and mouse away the dropdown glitchily appears on the left side of the screen and is overlapping somehow.

2. The whole navigation is positioned using a really stupid system of margin-lefts and padding on multiple classes and when I change one thing it messes up the other. You can see that the dropdown on Cocktails isn't positioned perfectly to the link and the yellow bar hover state.

3. There are also some really stupid breakpoints (around 1025px and 990px) that you'll see are also messing up the dropdowns to the point you cant even click the dropdown links. When I give new CSS to the breakpoint it messes up the desktop state and vice versa.

I've tried messing with all the different navigation and drop down CSS by trial and error and when I get one thing right something else messes up. Since the site looks good to me otherwise I don't really want to re do all the code for the nav from scratch. Any help would be useful. Thanks in advance!! If there's more info I can give that can help let me know.

Screenshot of the issue:

_{(source: bumbu.com )}

Answer 1

I don't know why the developer has used margins for alignment, which is a worst practice. But this fixes it:

.sub-nav2 {
  transition: opacity 0.4s ease-out;
  position: absolute;
  text-align: left;
  margin-left: -108px; /* Change this here. */
  margin-top: 90px;
}

You may need to do some tweaking with the 108px . What I see is:

Solution for Skipping

/* Line #185 */
nav ul ul {
  padding-top: 5px;
  margin-top: 85px;
}
/* Line #195 */
.sub-nav2 {
  margin-left: -108px;
  margin-top: 85px;
}