HTML + CSS drop down menu

Question

Trying to practice making a slide down menu with html and css.

My only issue is with how the list items overlaps with the menu option.

How do i get the menu to slide behind the menu option?

HTML

<div class="container">
  <p>Text</p>
  <div class="menu">
    <ul>
      <li>Menu 1</li>
      <li>Menu 2</li>
      <li>Menu 3</li>
    </ul>
  </div>
</div>

CSS

.container {
  width: 30px;
  height: 20px;
  background-color: red;
}

ul {
  list-style-type: none;
  padding: 0;
}

.menu { 
  height: 0;
  visibility: hidden;
  top: -50px;
  position: absolute;
  transition: all .5s ease;
}

.container:hover .menu {
  visibility: visible;
  top: 20px;
}

.container .menu ul li {
  border: 1px solid black;
  width: 50px;
}

Thanks in advance!

give the ul a position and a z-index of less than the menu

VikingBlooded
– VikingBlooded

2016-07-27 19:54:48 +00:00
Commented Jul 27, 2016 at 19:54 — VikingBlooded
– VikingBlooded, Commented Jul 27, 2016 at 19:54

Muhammad Awais · Accepted Answer · 2016-07-27 19:58:35Z

1

Try Z Index. Give z-index:1 to menu and z-index:-1 to ul

[Link][1]


  [1]: https://jsfiddle.net/Le8jv91j/

answered Jul 27, 2016 at 19:58

Muhammad Awais

5231 gold badge6 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

elasticman · Accepted Answer · 2016-07-27 19:58:50Z

1

As already mentioned, use a z-index of -1. Codepen

.menu { 
    height: 0;
    visibility: hidden;
    top: -50px;
    position: absolute;
    transition: all .5s ease;
    z-index: -1;
}

answered Jul 27, 2016 at 19:58

elasticman

6418 silver badges22 bronze badges

Collectives™ on Stack Overflow

HTML + CSS drop down menu

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related