How to make the overflow CSS property work with hidden as value

Question

I am having a tough time with overflow: hidden.

Basically, I am trying to hide the overflow of an unordered list which is located in a

Answer 1

In addition to provided answers:

it seems like parent element (the one with overflow:hidden) must not be display:inline. Changing to display:inline-block worked for me.

.outer {
  position: relative;
  border: 1px dotted black;
  padding: 5px;
  overflow: hidden;
}
.inner {
  position: absolute;
  left: 50%;
  margin-left: -20px;
  top: 70%;
  width: 40px;
  height: 80px;
  background: yellow;
}

  Some text
  


  Some text