Dropdown menu

HTML & CSS
1

I’m trying to create a drop-down menu and it’s not working. it shows when i have the display set to block but when i set the the display of the drop-down to none and the hover to block, nothing shows at all.

2

3

The div is next to the a, but your CSS is targeting it as if it is inside the a. Since that is not the case it doesn’t work.

This should work:

.navigation_bar a:hover + .dropdown_content {
    display: block;
}

The + there instructs to style the div that is direct sibling of a, which is exactly what you need here :slight_smile:

1 Like
4

Generally you would not use that structure for hover drop down menus but instead use an unordered list (ul) with nested uls for the submenus. This gives the benefit that you don’t need the adjacent selector (+) which when combined with hover is buggy in android and older ios versions.

It is also better to move the menu off screen rather than display:none as that may make the items not available to screen readers or search engines. (I’m guessing that you don’t want the dropdown taking up space in the page either otherwise when shown it will move all the page content down and usually you would want to remove it from the flow.)

The simplest example without any styling would be like this:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.menu,.menu ul{margin:0;padding:0;list-style:none;}
.menu ul{position:absolute;left:-999em;top:100%;}
.menu li{position :relative;}
.menu li:hover > ul{left:0;}
</style>
</head>

<body>
<ul class="menu">
  <li><a href="#">Show menu</a>
    <ul>
      <li><a href="#">Sub Menu 1</a></li>
      <li><a href="#">Sub Menu 2</a></li>
      <li><a href="#">Sub Menu 3</a></li>
    </ul>
  </li>
</ul>
</body>
</html>

Which can easily be styled into something like this:

1 Like
5

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