raihan-uddin · June 22, 2020 16:49
diff --git a/simple-html-menu.html b/simple-html-menu.html
 <!DOCTYPE html>
 <html>

 <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
   <style>
     .main {
    width: 100%;
    background: #eee;
 }


 /*General Menu Styling*/

 .mainnav {
    margin: 0 auto
 }

 li {
    list-style: none;
 }

 li a {
    text-decoration: none;
 }

 .dropdown {
    position: absolute;
    width: 150px;
    top: 41px;
    opacity: 0;
    visibility: hidden;
    transition: ease-out .35s;
    -moz-transition: ease-out .35s;
    -webkit-transition: ease-out .35s;
 }

 .mainnav li {
    float: left;
    padding: 5px;
    background: maroon;
    border-left: 1px dotted #fff;
 }

 .mainnav li:first-child {
    border: none;
 }

 .mainnav li a {
    display: block;
    padding: 2px 20px;
    color: #fff;
    font-family: arial;
 }

 .mainnav li:hover {
    background: #fff;
    transition: ease-in .35s;
    -moz-transition: ease-in .35s;
    -webkit-transition: ease-in .35s;
 }

 .mainnav li:hover a {
    color: maroon;
    transition: ease-in .35s;
    -moz-transition: ease-in .35s;
    -webkit-transition: ease-in .35s;
 }


 /*First Level*/

 .subs {
    left: -45px;
    position: relative;
    top: 0px;
    width: 175px;
    border-left: none !important;
    border-bottom: 1px dotted #fff !important;
 }

 .subs:last-child {
    border: none !important;
 }

 .hassubs:hover .dropdown,
 .hassubs .hassubs:hover .dropdown {
    opacity: 1;
    visibility: visible;
    transition: ease-in .35s;
    -moz-transition: ease-in .35s;
    -webkit-transition: ease-in .35s;
 }

 .mainnav li:hover ul a,
 .mainnav li:hover ul li ul li a {
    color: white;
 }

 .mainnav li ul li:hover,
 .mainnav li ul li ul li:hover {
    background: #fff;
    transition: ease-in-out .35s;
    -moz-transition: ease-in-out .35s;
    -webkit-transition: ease-in-out .35s;
 }

 .mainnav li ul li:hover a,
 .mainnav li ul li ul li:hover a {
    color: maroon;
    transition: ease-in-out .35s;
    -moz-transition: ease-in-out .35s;
    -webkit-transition: ease-in-out .35s;
 }


 /*Second Level*/

 .hassubs .hassubs .dropdown .subs {
    left: 25px;
    position: relative;
    width: 165px;
    top: 0px;
 }

 .hassubs .hassubs .dropdown {
    position: absolute;
    width: 150px;
    left: 120px;
    top: 0px;
    opacity: 0;
    visibility: hidden;
    transition: ease-out .35s;
    -moz-transition: ease-out .35s;
    -webkit-transition: ease-out .35s;
 }
  </style>
 </head>

 <body>
    <div class="main">
        <ul class="mainnav">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li class="hassubs"><a href="#">Electronics Devices</a>
                <ul class="dropdown">
                    <li class="subs"><a href="#">Laptops</a></li>
                    <li class="subs"><a href="#">Desktops</a></li>
                    <li class="subs hassubs"><a href="#">Mobile</a>
                        <ul class="dropdown">
                            <li class="subs"><a href="#">Samsung</a></li>
                            <li class="subs"><a href="#">Xiaomi</a></li>
                            <li class="subs"><a href="#">Nokia</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">Gallery</a></li>
            <li class="hassubs"><a href="#">Contact</a>
                <ul class="dropdown">
                    <li class="subs"><a href="#">Email</a></li>
                    <li class="subs hassubs"><a href="#">Address</a>
                        <ul class="dropdown">
                            <li class="subs"><a href="#">Head Office</a></li>
                            <li class="subs"><a href="#">Registered Office</a></li>
                            <li class="subs"><a href="#">Locate us</a></li>
                        </ul>
                    </li>
                    <li class="subs"><a href="#">Phone</a></li>
                </ul>
            </li>
            <li><a href="#">Login</a></li>
            <li><a href="#">Signup</a></li>
        </ul>
        <br style="clear: both;">
    </div>

 </body>

 </html>