in Web & Tech

Hover Intent for CSS-only Dropdown Menus

Looking for a way to improve on my pure CSS dropdown menus I found an article by Chris Poteet where he shared his thoughts simulating an hover intent effect by using CSS transitions. The snippet had a big drawback, though: anything that is under the dropdown menu, even when it’s not dropped down, cannot be focused anymore. The solution is to simply not trigger the dropdowns opacity property but it’s visibilty. I forked Chris’ snippet on Codepen with my little change: Pen

The HTML

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li class="children"><a href="#">About</a>
      <ul>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
<p>Text wiht <a href="http://www.wentsch.me/">A</a> and other text.</p>

The CSS

body {
    background-color: #283B4F;
    font: 0.8em arial,sans-serif;
    padding-top: 10px;
}

a {
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    background-color: #96A4AB;
    padding: 10px;
    -webkit-transition: background-color 200ms linear;
    transition: background-color 200ms linear;
}

a:hover {
  background-color: #7e919b;
}

ul > li {
    float: left;
    list-style-type: none;
    margin-left: 0;
}

li.children {
    position: relative;
}

li.children a {
  padding-right: 20px;
}

li.children > a:after {
    content: "";
    border-width: 5px;
    border-style: solid;
    border-color: #fff transparent transparent;
    position: absolute;
    right: 3px;
    top: 6px;
}

li.children:hover ul {
    visibility: visible;
    position: absolute;
    top: 20px;
    left: 10px;
}

ul ul {
    margin-left: 0;
    padding-left: 0;
    visibility: hidden;
    -webkit-transition: visibility 100ms linear 700ms;
    transition: visibility 100ms linear 700ms;
    position: absolute;
    top: 20px;
    left: 10px;
}

ul ul li {
    float: none;
    margin-left: 0;
    margin-top: 15px;
}

p { clear: both; margin: 5em; }

Write a Comment

Comment

  • Related Content by Tag