Help with adding hover dropdown

I have the below code which i believe displays and styles the menu for my site

				<header id="header">
					<h1><a href="index.html">Future Imperfect</a></h1>
					<nav class="links">
						<ul>
							<li><a href="#">Lorem</a></li>
							<li><a href="#">Ipsum</a></li>
							<li><a href="#">Feugiat</a></li>
							<li><a href="#">Tempus</a></li>
							<li><a href="#">Adipiscing</a></li>
						</ul>
					</nav>

The CSS i believe, is associated with this is

		#header .links ul li {
			border-left: solid 1px rgba(160, 160, 160, 0.3);
			line-height: 1;
			margin-left: 1em;
			padding-left: 1em;
		}

			#header .links ul li:first-child {
				border-left: 0;
				margin-left: 0;
				padding-left: 0;
			}

			#header .links ul li a {
				border-bottom: 0;
				font-family: "Raleway", Helvetica, sans-serif;
				font-size: 0.7em;
				font-weight: 400;
				letter-spacing: 0.25em;
				text-transform: uppercase;
			}

I have created a codepen which can be found https://codepen.io/codepen-man/pen/YzzxNdz but i just want to show my understanding above in case im wrong.

So what i would like to do is add a hover menu so when a user hovers over a menu item it would display a dropdown menu. For that reason i tried using https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown_hover to guide me but it doesnt work. I was attempting to amend the #header .links ul li code but i think i might be missing something.

Does anyone have any idea on this or could you change the codepen to start me off so i can then see what changes you have made to get this working? Thanks in advance

Hi "jamie_pattison,

Try add this sublist before the end tag of an item of your CodePen html:

<nav class="links">
  <ul>
    <li><a href="#">Lorem</a></li>
    <li><a href="#">Ipsum</a></li>
    <li><a href="#">Feugiat</a></li>
    <li class="submenu"><a href="#">Tempus</a>
      <ul class="sublist">
        <li><a href="#">Futurum</a></li>
        <li><a href="#">Presens</a></li>
        <li><a href="#">Perfect</a></li>
      </ul>
    </li>
    <li><a href="#">Adipiscing</a></li>
  </ul>
</nav>

Then, to hide and show the sublist, add these new rules to the css:


#header .submenu {
  position: relative; /* make the item be referred to as parent of the positioned child */
}
#header .sublist {
  display: none; /* hide the sublist */
  position: absolute; /* remove the sublist from the natural flow */
  top: 100%; /* place its top at the item bottom without a gap at any item height */
  left: 0; /* align the sublist with its parent item */
}
#header .submenu:hover > ul {
  display: block; /* show the sublist */
}

Let us know how you did. :slightly_smiling_face:

I believe it’s better to move the sub-menu off to the left (or right, if you prefer) rather than use display: none;

margin-left: -999em;

then

margin-left: 0;

but I forget why :blush:

1 Like

B/c some old browser – no one mentioned, no one forgot :slightly_smiling_face: – behaved unreliably when display none was used to hide the submenu.

The display hiding is more versatile imho, though I don’t really know exactly when the common method changed.

1 Like

You can’t animate from display:none so I prefer moving out the way and then you can animate back. Something like this old demo.

Also there was an issue regarding accessibility because assistive devices were ignoring elements with display:none from then tab order and thus not seeing (being able to navigate from) all the menu links.

I’m not sure of the current state of screen readers but I still tend to avoid display:none unless I want no one to see it until I say so :slight_smile:

Dropdowns are inherently inaccessible and it takes an awful lot of work to make them work smoothly for all devices and satisfy all accessibility needs. Unfortunately many of the users that employ them are the least likely to know how to make them work nicely :wink:

2 Likes

I did check a few of your recent CodePens and it seemed you use the display nowadays. But there are too many pens and there is no sorting by name, just date.
codepen.io/paulobrien/pen/NEWgyg :thinking:

My above example using display was a try to be more up to date. But iirc there was some problems with old browsers was it not. :blush:

1 Like

A lot of those code pens are in response to users questions on here and not my code as such. I’ve just generally fixed their code to work as they wanted. I usually add “forum question answer only” in the pen details :slight_smile: They should not be seen as the optimum method.

The problem with display none is that you can’t tab through the links as they are removed from the tab order. Therefore screen readers cannot access them properly. There are fixes I believe but it soon gets complex.

Yes historically ie6 did not work properly with display:none but was fine with the off left method (but also failed with left:auto and needed left:0 for a local context). However those days are gone. :slight_smile:

I’m not saying it’s wrong to use display:none but it certainly needs more thought than the off left method. I believe there was a lot of discussion a while back about hiding things from visual users but not screen readers (there was a visually hidden class using clip to hide content).

1 Like

Thank you for setting the record strait! :slightly_smiling_face:

I see your points and I fully agree! :slightly_smiling_face:

What is somewhat confusing; there’s nearly no tutorial that even mentions the hiding by (left) position, but there are loads of them relying on the display method.

I can’t recall coming across any popular one that’s not using display for hiding. :thinking:

1 Like

This article is a bit old now but still good value.

2 Likes

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