Issue with dropdown menu using only css

Question

I have created a menu with a submenu which can be seen here: JSFIDDLE.

I created a triangle on top of my submenu but due to the fact that the submenu is shown when the menu item is hovered, undesired behaviour is shown.

If you want to click on one of the submenu's the submenu will be set to: display:none due to the fact that there is no hover detection anymore.

I think it is a quite simple fix and perhaps there is already a related question on this topic. but i would really appreciate any help.

*{
  margin:0;
  padding:0;
}
.menu nav{ 
 text-align:center;
}
.menu nav ul{ 
 list-style-type:none;
}
.menu nav ul li{
 display:inline-block; 
 padding:80px 15px 0px 15px; 
 font-family: Titillium Web;
 font-weight:700;
 font-size:16px;
 color:#00adef;
 text-transform: uppercase; 
}
.menu nav ul li a{
 color:#00adef;
}
.menu nav ul li:hover{
 border-bottom:4px solid #00adef;
}
.menu nav ul li .submenu{
  display:none;
 position: absolute;    
 background-color:#1A98C8; 
  margin-top:15px;
 z-index:10;
 opacity:0.9;
 left:38%;
}
.menu nav ul li .submenu:before{
 content: '';
 position: absolute;
 left: 75px;
 top: -8px;
 width: 0;
 height: 0;
 border-left: 5px solid transparent;
 border-right: 5px solid transparent;
 border-bottom: 8px solid #1A98C8;
}
.menu nav ul li .submenu li{
 color:#fff;
 display:block;
 padding-top:0px;
  padding-left:0px;
 height:40px;
 border-bottom:1px solid #fff;
 opacity:1;
 line-height:40px;
  width:150px;
}
.menu nav ul li:hover .submenu{
    display:block;
}

<div class="menu">
    <nav>
        <ul class="default-menu">
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">about</a></li>
            <li>
              submenu <i class="fa fa-angle-right" aria-hidden="true"></i>
              <ul class="submenu">
                <li>test2</li>
                <li>test3</li>
                <li>test4</li>
              </ul> 
            </li>
            <li><a href="#">Testimonials</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>  
</div>

nashcheez · Accepted Answer · 2017-03-23T12:38:45.100

What you need to do here is basically add a delay for your .submenu to open so that when you navigate from your li to the .submenu, the .submenu is still open.

You can add that delay using the transition property as in:

.menu nav ul li .submenu {
  transition: all .1s;
}

Since you would be using transition, you can't use the display property since it does not reflect a state change. Use a combination of visibility and opacity to achieve the hide and show behaviour of display.

Refer code:

* {
  margin: 0;
  padding: 0;
}

.menu nav {
  text-align: center;
}

.menu nav ul {
  list-style-type: none;
}

.menu nav ul li {
  display: inline-block;
  padding: 80px 15px 0px 15px;
  font-family: Titillium Web;
  font-weight: 700;
  font-size: 16px;
  color: #00adef;
  text-transform: uppercase;
}

.menu nav ul li a {
  color: #00adef;
}

.menu nav ul li:hover {
  border-bottom: 4px solid #00adef;
}

.menu nav ul li .submenu {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  background-color: #1A98C8;
  margin-top: 15px;
  z-index: 10;
  opacity: 0.9;
  left: 38%;
  transition: all .1s;
}

.menu nav ul li .submenu:before {
  content: '';
  position: absolute;
  left: 75px;
  top: -8px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid #1A98C8;
}

.menu nav ul li .submenu li {
  color: #fff;
  display: block;
  padding-top: 0px;
  padding-left: 0px;
  height: 40px;
  border-bottom: 1px solid #fff;
  opacity: 1;
  line-height: 40px;
  width: 150px;
}

.menu nav ul li:hover .submenu {
  visibility: visible;
  opacity: 1;
}

<div class="menu">
  <nav>
    <ul class="default-menu">
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">about</a></li>
      <li>
        submenu <i class="fa fa-angle-right" aria-hidden="true"></i>
        <ul class="submenu">
          <li>test2</li>
          <li>test3</li>
          <li>test4</li>
        </ul>
      </li>
      <li><a href="#">Testimonials</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</div>

score 1 · Answer 2 · edited May 23 '17 at 12:10

Instead of using

display: none;

Try using

visibility:hidden

display:none means that the tag in question will not appear on the page at all (although you can still interact with it through the dom). There will be no space allocated for it between the other tags.

visibility:hidden means that unlike display:none, the tag is not visible, but space is allocated for it on the page. The tag is rendered, it just isn't seen on the page.

Found this on this question on stackoverflow. I think this could solve your issue of not being able to detect the :hover event (because 'display: none' removes the element)

Issue with dropdown menu using only css

2 Answers2