CODEWITHSUNDEEP
htmlcss
Johny P.
Johny P.

Reputation: 698

CSS strange behavior: overflow and margin-left

I am trying to make a nice transition for my site's menu: when the user hovers over the parent item, the children slide down and when the mouse leaves, they should go back up. But they don't, as seen in this fiddle. Then I asked for help here on SO and was pointed to using the overflow: hidden; approach and only transition the height. Okay. But that hid my child item's children items as seen in the snippet below:

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

li {
  width: 180px;
}

#menu ul ul {
  position: absolute;
  overflow: hidden;
  background: red none repeat scroll 0 0;
}

#menu ul li {
  position: relative;
}

#menu ul ul li {
  height: 0;
  transition: height 0.2s ease 0s;
}

#menu ul ul ul {
  margin-left: 100%;
  top: 0;
}

#menu ul li:hover>ul>li {
  height: 32px;
}
<nav id="menu">
  <ul>
    <li>Parent Item
      <ul>
        <li>Child Item</li>
        <li>Child Item &gt;
          <ul>
            <li>Child Child Item 1</li>
            <li>Child Child Item 2</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</nav>

So basically the "Child Child Item 1" and "Child Child Item 2" items are invisible to the user. How can I have both the slide down/up transition on mouse hover/leave and display both child items? Can it be done in pure CSS?

Upvotes: 0

Views: 51

Answers (1)

sol
sol

Reputation: 22959

You can set an initial opacity on the li to 0, in addition to a height of 0.

On :hover, change the opacity to 1. Note that I haven't included opacity in the transition effect. I think it may look better for it to change immediately.

updated

Instead of using opacity, I think setting the initial font-size to 0 and scaling up will produce a smoother effect. I've added classes to the triggers and menus for clarity. 

* {
  cursor: pointer;
}

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

li {
  width: 180px;
}

#menu ul ul {
  position: absolute;
  background: red none repeat scroll 0 0;
}

#menu ul li {
  position: relative;
}

.dropdown-one li,
.dropdown-two li {
  height: 0;
  font-size: 0;
  transition: height 0.2s ease 0s;
}

#menu ul ul ul {
  margin-left: 100%;
  top: 0;
}

.dropdown-trigger-one:hover .dropdown-one>li,
.dropdown-trigger-two:hover .dropdown-two>li {
  height: 32px;
  font-size: 1em;
}
<nav id="menu">
  <ul>
    <li class="dropdown-trigger-one">Parent Item
      <ul class="dropdown-one">
        <li>Child Item</li>
        <li class="dropdown-trigger-two">Child Item &gt;
          <ul class="dropdown-two">
            <li>Child Child Item 1</li>
            <li>Child Child Item 2</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</nav>

Upvotes: 1

Related Questions