Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>Funny issue</title>
      <style>
         .main-nav {
         }
         .main-nav,
         .main-nav * {
         margin: 0;
         padding: 0;
         list-style: none;
         }
         .main-nav > ul > li {
         position: relative;
         white-space: nowrap;
         float: left;
         }
         .main-nav a {
         display: block;
         position: relative;
         color: #413e66;
         padding: 10px 15px;
         transition: 0.8s;
         font-size: 14px;
         font-family: "Open Sans", sans-serif;
         text-transform: uppercase;
         font-weight: 600;
         }
         .main-nav a:hover,
         .main-nav .active > a,
         .main-nav li:hover > a {
         color: #1bb1dc;
         text-decoration: none;
         }
         .main-nav .drop-down ul {
         display: block;
         position: absolute;
         left: 0;
         top: calc(100% - 30px);
         z-index: 99;
         opacity: 0;
         visibility: hidden;
         padding: 10px ;
         background: #fff;
         box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
         transition: ease all 0.5s;
         }
         .main-nav .drop-down:hover > ul {
         opacity: 1;
         top: 100%;
         visibility: visible;
         }
         .main-nav .drop-down li {
         min-width: 180px;
         position: relative;
         }
         .main-nav .drop-down ul a {
         padding: 10px 20px;
         font-size: 14px;
         font-weight: 500;
         text-transform: none;
         color: #065e77;
         }
         .main-nav .drop-down ul a:hover,
         .main-nav .drop-down ul .active > a,
         .main-nav .drop-down ul li:hover > a {
         color: #1bb1dc;
         }
         .main-nav .drop-down > a:after {
         content: "\f107";
         font-family: FontAwesome;
         padding-left: 10px;
         }
         .main-nav .drop-down .drop-down ul {
         top: 0;
         left: calc(100% - 30px);
         }
         .main-nav .drop-down .drop-down:hover > ul {
         opacity: 1;
         top: 0;
         left: 100%;
         }
         .main-nav .drop-down .drop-down > a {
         padding-right: 35px;
         }
         .main-nav .drop-down .drop-down > a:after {
         content: "\f105";
         position: absolute;
         right: 15px;
         }
      </style>
   </head>
   <body>
      <nav class="main-nav  d-none d-lg-block "   >
         <ul class="float-lg-left bg-white" id="logo_ul"  >
            <li class="drop-down ">
               <a id="pads" href="{{route('view-published-pages')}}about-us">first drop down</a>
               <ul>
                  <li class="drop-down">
                     <a href="{{route('view-published-pages')}}Global-Presence">Global Presence</a>
                     <ul>
                        <li><a >cocoa loops </a></li>
                        <li><a >cocoa loops </a></li>
                        <li><a >cocoa loops </a></li>
                     </ul>
                  </li>
               </ul>
            </li>
            <li class="drop-down ">
               <a id="pads" href="{{route('view-published-pages')}}about-us">second dropdown</a>
               <ul>
                  <li class="drop-down">
                     <a href="{{route('view-published-pages')}}Global-Presence">Global Presence</a>
                     <ul>
                        <li><a >fruity loops </a></li>
                        <li><a >fruity loops </a></li>
                        <li><a >fruity loops </a></li>
                        <li><a >fruity loops </a></li>
                     </ul>
                  </li>
               </ul>
            </li>
         </ul>
      </nav>
   </body>
</html>
 
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers