Clearing the floats - horizintal menu with sub-menu

HTML & CSS
1

I have a horizontal menu to which I’m trying to add a drop-down sub-menu. The navbar is supposed to have a top and bottom border and a background but because the li’s are floated it has no height. I can’t use overflow hidden as that will hide the drop-down menu.

I’m rapidly running out of ideas and braincells. I’m sure I could refactor the code with the help of Google but I’m hoping to stay with most of what I have with a few corrections (or am I just dreaming?)

I have the following codepen https://codepen.io/gandalf458/pen/bLRpQe

2

Hi there gandalf458,

try it like this…



nav::after {
    content: '';
    display: table; 
    width: 100%;
 }

coothead

1 Like
3

Thanks @coothead. That’s purr-fect. It didn’t help my missing a colon in the CSS! :crying_cat_face:

1 Like
4

I really didn’t want to draw attention to that little “faux pas” :biggrin:

But now that you’ve mentioned it, you actually missed out two. :wonky:

coothead

2 Likes
5

That’s right, rub it in! :lol:

3 Likes
6

To be sure, to be sure.:rofl:

3 Likes
7

If you don’t mind my pointing it out, there is a slight positioning error in your nav ul li:hover ul rules. There are also some accessibility issues.

Here is what you have on the sub ul rules

nav ul ul {
  display: none;
}
nav ul li:hover ul {
  display: inline-block;
  position: absolute;
  top: 2.3em;
  left: 0;
}

The top:2.3em; rule leaves a 1px-2px area where the sub menu will not stay open. It gets worse when page is zoomed.

321×156 16.4 KB

Back in the old days when there were fixed heights on the main list-items that top:unit-value; method would work.

It is better to use top:auto; which places the sub-ul at the bottom of the parent content. That will hide your 1px bottom border on the main ul though so the fix is to add a top border to the sub ul.

There are accessibility issues with display:none; hiding the menu, it cannot be tabbed through with a keyboard and it is hidden from screen readers.

Hiding offscreen with negative margins is the way to keep everyone happy. :slight_smile:

So if you place all your rules on the sub-ul to begin with, all that is need on hover is the margin rule to show the menu.

This resolves all issue mentioned.

nav ul ul {
  position: absolute;
  top: auto ; /*doesn't require a known height*/
  left: 0;
  margin-left: -999em; /*hide with margin for accessibility*/
  border-top: 1px solid #999;  /*line up with main ul*/
}
nav ul li:hover ul {
  margin-left: 0;
}

And then you can test the a href values 1-3 on the sub-list, they now show that keyboard tabbing is working.

  <ul>
    <li><a href="#" class="current">Mission</a></li>
    <li><a href="#">Projects</a>
      <ul>
        <li><a href="1">Knitting classes</a></li>
        <li><a href="2">Ball games</a></li>
        <li><a href="3">Orphanage project</a></li>
      </ul>
    </li>
1 Like
8

Thanks Ray

I didn’t like the 2.3em as I could see it was a bit hit-and-miss and seemed a bit magic number-ish. Didn’t realise I could use auto there.

Thanks too for the comments on accessibility. I always try to make my sites accessible, and cover that one with a “cheat” by putting a menu of projects on the projects page.

1 Like
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.