js+css to realize three-level navigation menu

This article example shares the specific code of js+css to implement the three-level navigation menu for your reference. The specific content is as follows

It is relatively easy to implement the navigation menu hover event with CSS. You only need to change the transparency. If you want the menu to have a gradient effect, unfortunately, transition does not support display, so using opacity to achieve the same effect.

Here is the complete code implemented in CSS:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>Third level navigation menu</title>
 </head>
 <style>
  *{
 margin: 0;
 padding: 0;
}
body{
 font-size: 16px;
 background-color:#EDEDED ;
 font-style: inherit;
 color:#757576 ;
}
.main{
 width: 1050px;
 margin: 0 auto;
}
.fl{
 float: left;
}
.fr{
 float: right;
}
a{
 text-decoration: none;
 outline: none;
 color:#757576 ;
}
ul,ol{
 list-style: none;
}
.clear{ 
 clear: both;
}
.clearfix{
 *zoom:1;
}
li{
 float: left;
 display: inline-block;
 width: 120px;
 height: 40px;
 text-align: center;
 line-height: 40px;
}
li a:hover{
 color: red;
}
#first {
 opacity: 0;
}
#firstli{
 float: none;
 position: relative;
}
 li a:hover{
 color: red;
 transition: all 0.5s;
}
:hover{
 transition: all 2s; 
}
#second {
 opacity: 0;
 margin: -40px 0 0 80px;
 padding: 0px;
 position: absolute;
}
#nav_one:hover #first{
 opacity:1;
 transition: all 2s;
}
#nav_two:hover #second{
 opacity:1;
 transition: all 2s;
}
 </style>
 
 <body>
  <div class="nav main">
   <ul id="nav">
    <li id="nav_one"><a href="#" >Level 1</a>
     <ul id="first">
      <li id="nav_two" class="nav_two">
       <a href="#" >Second Level</a>
       <ul id="second">
        <li><a href="#" >Level 3</a></li>
        <li><a href="#" >Level 3</a></li>
        <li><a href="#" >Level 3</a></li>
       </ul>
      </li>
      <li class="nav_two"><a href="#" >Second level</a></li>
      <li class="nav_two"><a href="#" >Second level</a></li>
     </ul>
    </li> 
    <li><a href="#" >Level 1</a></li>
    <li><a href="#" >Level 1</a></li>
    <li><a href="#" >Level 1</a></li>
    <li><a href="#" >Level 1</a></li>
   </ul>
 </div>  
 </body>
</html>

The implementation of js is relatively troublesome, but it is also possible, replacing the hover effect in CSS.

<!--<script>
 window.onload = function(){
  var one = document.getElementById("nav_one");
  var frist = document.getElementById("frist");
  var second = document.getElementById("second");
   one.onmouseover = function(){
    first.style.opacity = "1";
    first.style.transition = "all 2s";
    first.style.WebkitTransition = "all 2s";
   }
   one.onmouseout = function(){
    first.style.opacity = "0";
    first.style.transition = "all 0.5s";
    first.style.WebkitTransition = "all 0.5s";
   }
  var two = document.getElementById("nav_two");
   two.onmouseover = function(){
    second.style.opacity = "1";
    second.style.transition = "all 2s";
    second.style.WebkitTransition = "all 2s";
   }
   two.onmouseout = function(){
    second.style.opacity = "0";
    second.style.transition = "all 0.5s";
    second.style.WebkitTransition = "all 0.5s";
   }
  }
</script>-->

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

js left three-level menu navigation example code
Three ways to implement the secondary drop-down menu in the navigation menu in JS
JS realizes the effect of highlighting the navigation bar after selecting the current menu
A js-controlled navigation menu example code
js to achieve horizontal scrolling menu navigation
Accordion effect navigation menu made by native js
JS navigation menu comparable to Flash
Native JS to achieve the effect of navigation drop-down menu
js method to realize multi-option switching navigation menu
A relatively classic and practical trigger-type navigation menu implemented with js

<<: Sample code for implementing rolling updates of services using Docker Swarm

>>: MySQL multi-table join introductory tutorial