Space in second ul

HTML & CSS
1

Hi all
If you mouse over the procedure tab on the top navigation and then the items of the list that appear there is a space so it is not tight up against the top navigation. How do I get rid of this space? Thank you http://tinyurl.com/7mmplrk

2

In your CSS find the following selector “#suckerfishnav li ul ul” and change the top margin from -33px to -35px.

3

Thanks!

4

As SgtLegend has said, the gap above the second level dropdown is caused by the -33px margin on #suckerfishnav li ul ul not matching the height of the parent li. But as the li height may vary depending on whether the text wraps to more than one line or if the user’s browser is set to display a larger text size, the negative margin approach is fragile.

Instead, you could swap to absolutely positioning the ul. For this you’d need to give the parent - #suckerfishnav li li - position:relative. With the ul set to top:0 it will sit flush with the top of the li. Only margin-left is required for the ul to be pushed to the right of the li.

Altogether it requires two lines to be added and one changed.

#suckerfishnav li li {
  font-family:"Trebuchet MS",sans-serif;
  font-size: 14px;
  font-weight: normal;
  position: relative; /* added */
  width: 220px;
}

#suckerfishnav li ul ul {
  background-repeat: repeat;
  margin-left: 220px; /* changed */
  top: 0; /* added */
}

If the user increases text size or text wraps in the li, the sub-sub menu will now continue to align with the top of its parent li.

Edit: check your CSS validation - there are non-standard quote characters around Trebuchet MS and a parse error.