Rotan075 Rotan075 -4 years ago 84
CSS Question

Issue with dropdown menu using only css

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>




Answer Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download