I'm not able to implement the hover dropdown in my navigation bar

40
January 21, 2019, at 10:10 PM

I have created a navbar using html,css and bootstrap. On hover of the menu items, the dropdown appears, but as soon as I move my cursor to dropdown menu, it disappears. I have tried with display: block. But, not able to implement. Can somebody please help me to troubleshoot this issue. It would be of immense help.

.navbar{ 
  position:relative; 
} 
 
.navbar:before { 
  content: ''; 
  position: absolute; 
  width: 0; 
  height: 0; 
  border-style: solid; 
  border-width: 10px 12.5px 0 12.5px; 
  border-color: #fff transparent transparent transparent; 
  left: 55px; 
  top: 99%; 
  -webkit-transform: translateY(0) scale(1); 
  transform: translateY(0) scale(1); 
  -webkit-transition: -webkit-transform 337ms ease-in-out; 
  transition: -webkit-transform 337ms ease-in-out; 
  transition: transform 337ms ease-in-out; 
  transition: transform 337ms ease-in-out,-webkit-transform 337ms ease-in-out; 
} 
 
 
nav .navbar-nav .nav-item .nav-link{ 
   line-height:59px; 
  -webkit-transition: background-color 1s; 
  -moz-transition: background-color 1s; 
  -o-transition: background-color 1s; 
  transition: background-color 1s; 
} 
 
nav .navbar-nav .nav-item .nav-link:hover, .dropdown:hover .dropbtn{ 
  background-color: #f1c575; 
} 
 
nav ul li:hover > .nav-link { 
  background-color: #f1c575; 
  color: #FFF; 
} 
 
 
nav .navbar-nav .nav-item .nav-link { 
  position: relative; 
} 
 
nav .navbar-nav .nav-item:hover .nav-link:before { 
content: ""; 
display: block; 
border-left: 10px solid transparent; 
border-right: 10px solid transparent; 
border-bottom: 10px solid #7B8B93; 
position: absolute; 
left: 35%; 
bottom: 0px; 
} 
 
/* Navbar Ends */ 
 
/* Nav Menu Starts */ 
 
.dropdown-content { 
  display: none !important; 
  position: absolute; 
  background-color: #7b8b93; 
  width: 100%; 
  left: 0; 
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
  z-index: 1; 
  padding-top:20px; 
  padding-bottom:40px; 
} 
 
nav .navbar-nav .nav-item .nav-link:hover + .dropdown-content{ 
  display:block !important;  
} 
 
 
.dropdown-content li:first-child, .dropdown-content li:last-child{ 
  font-size:18px; 
} 
 
.dropdown-content li a{ 
  text-decoration:none; 
  color:#fff; 
} 
 
/* Nav Menu  Ends*/
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> 
 
 
<nav class="navbar navbar-expand-lg navbar-light bg-light"> 
  <a class="navbar-brand" href="./index.html">LoGO</a> 
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
        <span class="navbar-toggler-icon"></span> 
    </button> 
 
  <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
    <ul class="navbar-nav ml-auto"> 
      <li class="nav-item"> 
        <a class="nav-link" href="./index.html">Home <span class="sr-only">(current)</span></a> 
      </li> 
      <li class="nav-item"> 
        <a class="nav-link" href="#">Capabilities</a> 
        <ul class="list-inline dropdown-content"> 
          <li class="list-inline-item list-left-items"> 
            <a href="#">Products</a> 
            <ul class="open-source"> 
              <li><a>Magento</a></li> 
              <li><a>IBM v9 Commerce</a></li> 
              <li><a>Drupal</a></li> 
            </ul> 
          </li> 
          <li class="list-inline-item list-right-items"> 
            <a href="#"> Product Categories</a> 
            <ul class="list-categories"> 
              <li class="one"> 
                <a href="./eCommerce.html" title="E-Commerce"> 
 
                  <img class="make-white" src="./images/aoe_icons_services_order_management.svg" alt="E-Commerce"> 
 
                  <span class="service-title">E-Commerce</span> 
                </a> 
              </li> 
 
              <li class="two"> 
                <a title="Content Management" href="#"> 
 
                  <img class="make-white" src="./images/aoe_icons_webportal.svg" alt="Content Management"> 
 
                  <span class="service-title">Content Management</span> 
                </a> 
              </li> 
 
              <li class="three"> 
                <a title="Middleware &amp; ESB" href="#"> 
 
                  <img class="make-white" src="./images/Plattform1.svg" alt="Middleware &amp; ESB"> 
 
                  <span class="service-title">Middleware &amp; ESB</span> 
                </a> 
              </li> 
 
              <li class="one"> 
                <a title="Search &amp; Recommendation" href="#"> 
 
                  <img class="make-white" src="./images/Search2.svg" alt="Search &amp; Recommendation"> 
 
                  <span class="service-title">Search &amp; Recommendation</span> 
                </a> 
              </li> 
 
              <li class="three"> 
                <a title="Identity &amp; Access Management" href="#"> 
 
                  <img class="make-white" src="./images/aoe_icons_technologies-13.svg" alt="Identity"> 
 
                  <span class="service-title">PIM Systems</span> 
                </a> 
              </li> 
 
              <li class="three"> 
                <a title="Identity &amp; Access Management" href="#"> 
 
                  <img class="make-white" src="./images/aoe_icons_technologies-13.svg" alt="Identity &amp; Access Management"> 
 
                  <span class="service-title">Identity &amp; Access Management</span> 
                </a> 
              </li> 
 
              <li class="one"> 
                <a title="Development Frameworks" href="#"> 
 
                  <img class="make-white" src="./images/aoe_icons_betrieb.svg" alt="Development Frameworks"> 
 
                  <span class="service-title">Development Frameworks</span> 
                </a> 
              </li> 
 
              <li class="two"> 
                <a title="CRM Systems" href="#"> 
 
                  <img class="make-white" src="./images/aoe_icons_crm_2.svg" alt="CRM Systems"> 
 
                  <span class="service-title">CRM Systems</span> 
                </a> 
              </li> 
 
              <li class="three"> 
                <a title="Databases &amp; Storage" href="#"> 
 
                  <img class="make-white" src="./images/aoe_icons_Effiziente_Datenverwaltung.svg" alt="Databases &amp; Storage"> 
 
                  <span class="service-title">Databases &amp; Storage</span> 
                </a> 
              </li> 
 
              <li class="one"> 
                <a title="Mobile Frameworks" href="#"> 
 
                  <img class="make-white" src="./images/aoe_icons_mobile-02.svg" alt="Mobile Frameworks"> 
 
                  <span class="service-title">Mobile Frameworks</span> 
                </a> 
              </li> 
            </ul> 
          </li> 
        </ul> 
      </li> 
      <li class="nav-item"> 
        <a class="nav-link" href="#">Solutions</a> 
        <ul class="list-inline dropdown-content"> 
          <li class="list-inline-item list-left-items"> 
            <a href="#">Solutions</a> 
            <ul class="open-source"> 
              <li class="commerce"><a>Dr.Commerce</a></li> 
              <li class="universal"><a>Universal Commerce</a></li> 
              <li class="emmerging"><a>Emmerging Techlogies</a></li> 
            </ul> 
          </li> 
          <li class="list-inline-item list-right-items"> 
            <a href="#"> Services & Technologies</a> 
            <ul class="list-categories"> 
              <li class="one"> 
                <a href="#" title="E-Commerce"> 
 
                  <img class="make-white" src="./images/Strategy2.svg"> 
                  <span class="service-title">Strategy &amp; Consulting</span> 
                </a> 
              </li> 
 
              <li class="two"> 
                <a title="Content Management" href="#"> 
 
                  <img class="make-white" src="./images/Design1.svg"> 
                  <span class="service-title">UX &amp; Design</span> 
                </a> 
              </li> 
 
              <li class="three"> 
                <a title="Middleware &amp; ESB" href="#"> 
 
                  <img class="make-white" alt="Software Architecture" src="./images/aoe_icons_Software_Architektur.svg"> 
                  <span class="service-title">Software Architecture</span> 
                </a> 
              </li> 
 
              <li class="one"> 
                <a title="Search &amp; Recommendation" href="#"> 
 
                  <img class="make-white" src="./images/aoe_icons_betrieb.svg"> 
                  <span class="service-title">Agile Development</span> 
                </a> 
              </li> 
 
              <li class="two"> 
                <a title="PIM Systems" href="#"> 
                  <img class="make-white" alt="Digital Products" src="./images/Digitization2.svg"> 
                  <span class="service-title">Digital Products</span> 
                </a> 
              </li> 
 
              <li class="three"> 
                <a title="Identity &amp; Access Management" href="#"> 
 
                  <img class="make-white" alt="Payment &amp; Fulfillment" src="./images/aoe_icons_services_payment.svg"> 
                  <span class="service-title">Payment &amp; Fulfillment</span> 
                </a> 
              </li> 
 
              <li class="one"> 
                <a title="Development Frameworks" href="#"> 
 
                  <img class="make-white" alt="Systems Integration" src="./images/Integration1.svg"> 
                  <span class="service-title">Systems Integration</span> 
                </a> 
              </li> 
 
              <li class="two"> 
                <a title="CRM Systems" href="#"> 
 
                  <img class="make-white" alt="DevOps &amp; Operations" src="./images/aoe_icons_Continuous_Deployment.svg"> 
                  <span class="service-title">DevOps &amp; Operations</span> 
                </a> 
              </li> 
 
              <li class="three"> 
                <a title="Databases &amp; Storage" href="#"> 
 
                  <img class="make-white" alt="Customer Care" src="./images/aoe_icons_Customer_Care.svg"> 
                  <span class="service-title">Customer Care</span> 
                </a> 
              </li> 
 
              <li class="one"> 
                <a title="Mobile Frameworks" href="#"> 
 
                  <img class="make-white" src="./images/aoe_icons_mobile-02.svg" alt="Mobile Frameworks"> 
 
                  <span class="service-title">Mobile Frameworks</span> 
                </a> 
              </li> 
              <li class="two"> 
                <a title="Portal" href="#"> 
 
                  <img class="make-white" alt="Portals &amp; Applications" src="./images/aoe_icons_web_and_mobile_applications.svg"> 
                  <span class="service-title">Portals &amp; Applications</span> 
                </a> 
              </li> 
              <li class="three"> 
                <a title="CMS Solutions" href="#"> 
 
                  <img class="make-white" alt="CMS Solutions" src="./images/aoe_icons_web_content_management.svg"> 
                  <span class="service-title">CMS Solutions</span> 
                </a> 
              </li> 
              <li class="one"> 
                <a title="Middle Ware" href="#"> 
 
                  <img class="make-white" alt="ESB &amp; Middleware" src="./images/Plattform1.svg"> 
                  <span class="service-title">ESB &amp; Middleware</span> 
                </a> 
              </li> 
              <li class="two"> 
                <a title="CRM Integration" href="#"> 
 
                  <img class="make-white" alt="CRM Integration" src="./images/aoe_icons_crm_2.svg"> 
                  <span class="service-title">CRM Integration</span> 
                </a> 
              </li> 
              <li class="three"> 
                <a title="Identity" href="#"> 
 
                  <img class="make-white" src="./images/aoe_icons_technologies_IRM.svg"> 
                  <span class="service-title">Identity &amp; Access Mngmt</span> 
                </a> 
              </li> 
              <li class="one"> 
                <a title="Search" href="#"> 
 
                  <img class="make-white" alt="Search" src="./images/Search2.svg"> 
                  <span class="service-title">Search</span> 
                </a> 
              </li> 
              <li class="two"> 
                <a title="E-Commerce" href="#"> 
 
                  <img class="make-white" alt="E-Commerce" src="./images/aoe_icons_services_order_management.svg"> 
                  <span class="service-title">E-Commerce</span> 
                </a> 
              </li> 
              <li class="three"> 
                <a title="Mobile Apps" href="#"> 
 
                  <img class="make-white" alt="Mobile Apps" src="./images/aoe_icons_web_and_mobile_applications.svg"> 
                  <span class="service-title">Mobile Apps</span> 
                </a> 
              </li> 
              <li class="one"> 
                <a title="PIM Systems" href="#"> 
 
                  <img class="make-white" alt="PIM Systems" src="./images/aoe_icons_technologies-13.svg"> 
                  <span class="service-title">PIM Systems</span> 
                </a> 
              </li> 
            </ul> 
            <p class="text-center mt-5"><a class="btn btn-custom">View All</a></p> 
          </li> 
 
        </ul> 
      </li> 
    </ul> 
  </div> 
</nav> 
 
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

Answer 1

Just change this css, This makes the li hoverable and will not hoverout if the cursor moves out of anchor .nav-link

nav .navbar-nav .nav-item:hover .dropdown-content{
  display:block !important; 
}

.navbar{ 
  position:relative; 
} 
 
.navbar:before { 
  content: ''; 
  position: absolute; 
  width: 0; 
  height: 0; 
  border-style: solid; 
  border-width: 10px 12.5px 0 12.5px; 
  border-color: #fff transparent transparent transparent; 
  left: 55px; 
  top: 99%; 
  -webkit-transform: translateY(0) scale(1); 
  transform: translateY(0) scale(1); 
  -webkit-transition: -webkit-transform 337ms ease-in-out; 
  transition: -webkit-transform 337ms ease-in-out; 
  transition: transform 337ms ease-in-out; 
  transition: transform 337ms ease-in-out,-webkit-transform 337ms ease-in-out; 
} 
 
 
nav .navbar-nav .nav-item .nav-link{ 
   line-height:59px; 
  -webkit-transition: background-color 1s; 
  -moz-transition: background-color 1s; 
  -o-transition: background-color 1s; 
  transition: background-color 1s; 
} 
 
nav .navbar-nav .nav-item .nav-link:hover, .dropdown:hover .dropbtn{ 
  background-color: #f1c575; 
} 
 
nav ul li:hover > .nav-link { 
  background-color: #f1c575; 
  color: #FFF; 
} 
 
 
nav .navbar-nav .nav-item .nav-link { 
  position: relative; 
} 
 
nav .navbar-nav .nav-item:hover .nav-link:before { 
content: ""; 
display: block; 
border-left: 10px solid transparent; 
border-right: 10px solid transparent; 
border-bottom: 10px solid #7B8B93; 
position: absolute; 
left: 35%; 
bottom: 0px; 
} 
 
/* Navbar Ends */ 
 
/* Nav Menu Starts */ 
 
.dropdown-content { 
  display: none !important; 
  position: absolute; 
  background-color: #7b8b93; 
  width: 100%; 
  left: 0; 
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
  z-index: 1; 
  padding-top:20px; 
  padding-bottom:40px; 
} 
 
nav .navbar-nav .nav-item:hover .dropdown-content{ 
  display:block !important;  
} 
 
 
.dropdown-content li:first-child, .dropdown-content li:last-child{ 
  font-size:18px; 
} 
 
.dropdown-content li a{ 
  text-decoration:none; 
  color:#fff; 
} 
 
/* Nav Menu  Ends*/
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> 
 
 
<nav class="navbar navbar-expand-lg navbar-light bg-light"> 
  <a class="navbar-brand" href="./index.html">LoGO</a> 
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
        <span class="navbar-toggler-icon"></span> 
    </button> 
 
  <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
    <ul class="navbar-nav ml-auto"> 
      <li class="nav-item"> 
        <a class="nav-link" href="./index.html">Home <span class="sr-only">(current)</span></a> 
      </li> 
      <li class="nav-item"> 
        <a class="nav-link" href="#">Capabilities</a> 
        <ul class="list-inline dropdown-content"> 
          <li class="list-inline-item list-left-items"> 
            <a href="#">Products</a> 
            <ul class="open-source"> 
              <li><a>Magento</a></li> 
              <li><a>IBM v9 Commerce</a></li> 
              <li><a>Drupal</a></li> 
            </ul> 
          </li> 
          <li class="list-inline-item list-right-items"> 
            <a href="#"> Product Categories</a> 
            <ul class="list-categories"> 
              <li class="one"> 
                <a href="./eCommerce.html" title="E-Commerce"> 
 
                  <img class="make-white" src="./images/aoe_icons_services_order_management.svg" alt="E-Commerce"> 
 
                  <span class="service-title">E-Commerce</span> 
                </a> 
              </li> 
 
              <li class="two"> 
                <a title="Content Management" href="#"> 
 
                  <img class="make-white" src="./images/aoe_icons_webportal.svg" alt="Content Management"> 
 
                  <span class="service-title">Content Management</span> 
                </a> 
              </li> 
 
              <li class="three"> 
                <a title="Middleware &amp; ESB" href="#"> 
 
                  <img class="make-white" src="./images/Plattform1.svg" alt="Middleware &amp; ESB"> 
 
                  <span class="service-title">Middleware &amp; ESB</span> 
                </a> 
              </li> 
 
              <li class="one"> 
                <a title="Search &amp; Recommendation" href="#"> 
 
                  <img class="make-white" src="./images/Search2.svg" alt="Search &amp; Recommendation"> 
 
                  <span class="service-title">Search &amp; Recommendation</span> 
                </a> 
              </li> 
 
              <li class="three"> 
                <a title="Identity &amp; Access Management" href="#"> 
 
                  <img class="make-white" src="./images/aoe_icons_technologies-13.svg" alt="Identity"> 
 
                  <span class="service-title">PIM Systems</span> 
                </a> 
              </li> 
 
              <li class="three"> 
                <a title="Identity &amp; Access Management" href="#"> 
 
                  <img class="make-white" src="./images/aoe_icons_technologies-13.svg" alt="Identity &amp; Access Management"> 
 
                  <span class="service-title">Identity &amp; Access Management</span> 
                </a> 
              </li> 
 
              <li class="one"> 
                <a title="Development Frameworks" href="#"> 
 
                  <img class="make-white" src="./images/aoe_icons_betrieb.svg" alt="Development Frameworks"> 
 
                  <span class="service-title">Development Frameworks</span> 
                </a> 
              </li> 
 
              <li class="two"> 
                <a title="CRM Systems" href="#"> 
 
                  <img class="make-white" src="./images/aoe_icons_crm_2.svg" alt="CRM Systems"> 
 
                  <span class="service-title">CRM Systems</span> 
                </a> 
              </li> 
 
              <li class="three"> 
                <a title="Databases &amp; Storage" href="#"> 
 
                  <img class="make-white" src="./images/aoe_icons_Effiziente_Datenverwaltung.svg" alt="Databases &amp; Storage"> 
 
                  <span class="service-title">Databases &amp; Storage</span> 
                </a> 
              </li> 
 
              <li class="one"> 
                <a title="Mobile Frameworks" href="#"> 
 
                  <img class="make-white" src="./images/aoe_icons_mobile-02.svg" alt="Mobile Frameworks"> 
 
                  <span class="service-title">Mobile Frameworks</span> 
                </a> 
              </li> 
            </ul> 
          </li> 
        </ul> 
      </li> 
      <li class="nav-item"> 
        <a class="nav-link" href="#">Solutions</a> 
        <ul class="list-inline dropdown-content"> 
          <li class="list-inline-item list-left-items"> 
            <a href="#">Solutions</a> 
            <ul class="open-source"> 
              <li class="commerce"><a>Dr.Commerce</a></li> 
              <li class="universal"><a>Universal Commerce</a></li> 
              <li class="emmerging"><a>Emmerging Techlogies</a></li> 
            </ul> 
          </li> 
          <li class="list-inline-item list-right-items"> 
            <a href="#"> Services & Technologies</a> 
            <ul class="list-categories"> 
              <li class="one"> 
                <a href="#" title="E-Commerce"> 
 
                  <img class="make-white" src="./images/Strategy2.svg"> 
                  <span class="service-title">Strategy &amp; Consulting</span> 
                </a> 
              </li> 
 
              <li class="two"> 
                <a title="Content Management" href="#"> 
 
                  <img class="make-white" src="./images/Design1.svg"> 
                  <span class="service-title">UX &amp; Design</span> 
                </a> 
              </li> 
 
              <li class="three"> 
                <a title="Middleware &amp; ESB" href="#"> 
 
                  <img class="make-white" alt="Software Architecture" src="./images/aoe_icons_Software_Architektur.svg"> 
                  <span class="service-title">Software Architecture</span> 
                </a> 
              </li> 
 
              <li class="one"> 
                <a title="Search &amp; Recommendation" href="#"> 
 
                  <img class="make-white" src="./images/aoe_icons_betrieb.svg"> 
                  <span class="service-title">Agile Development</span> 
                </a> 
              </li> 
 
              <li class="two"> 
                <a title="PIM Systems" href="#"> 
                  <img class="make-white" alt="Digital Products" src="./images/Digitization2.svg"> 
                  <span class="service-title">Digital Products</span> 
                </a> 
              </li> 
 
              <li class="three"> 
                <a title="Identity &amp; Access Management" href="#"> 
 
                  <img class="make-white" alt="Payment &amp; Fulfillment" src="./images/aoe_icons_services_payment.svg"> 
                  <span class="service-title">Payment &amp; Fulfillment</span> 
                </a> 
              </li> 
 
              <li class="one"> 
                <a title="Development Frameworks" href="#"> 
 
                  <img class="make-white" alt="Systems Integration" src="./images/Integration1.svg"> 
                  <span class="service-title">Systems Integration</span> 
                </a> 
              </li> 
 
              <li class="two"> 
                <a title="CRM Systems" href="#"> 
 
                  <img class="make-white" alt="DevOps &amp; Operations" src="./images/aoe_icons_Continuous_Deployment.svg"> 
                  <span class="service-title">DevOps &amp; Operations</span> 
                </a> 
              </li> 
 
              <li class="three"> 
                <a title="Databases &amp; Storage" href="#"> 
 
                  <img class="make-white" alt="Customer Care" src="./images/aoe_icons_Customer_Care.svg"> 
                  <span class="service-title">Customer Care</span> 
                </a> 
              </li> 
 
              <li class="one"> 
                <a title="Mobile Frameworks" href="#"> 
 
                  <img class="make-white" src="./images/aoe_icons_mobile-02.svg" alt="Mobile Frameworks"> 
 
                  <span class="service-title">Mobile Frameworks</span> 
                </a> 
              </li> 
              <li class="two"> 
                <a title="Portal" href="#"> 
 
                  <img class="make-white" alt="Portals &amp; Applications" src="./images/aoe_icons_web_and_mobile_applications.svg"> 
                  <span class="service-title">Portals &amp; Applications</span> 
                </a> 
              </li> 
              <li class="three"> 
                <a title="CMS Solutions" href="#"> 
 
                  <img class="make-white" alt="CMS Solutions" src="./images/aoe_icons_web_content_management.svg"> 
                  <span class="service-title">CMS Solutions</span> 
                </a> 
              </li> 
              <li class="one"> 
                <a title="Middle Ware" href="#"> 
 
                  <img class="make-white" alt="ESB &amp; Middleware" src="./images/Plattform1.svg"> 
                  <span class="service-title">ESB &amp; Middleware</span> 
                </a> 
              </li> 
              <li class="two"> 
                <a title="CRM Integration" href="#"> 
 
                  <img class="make-white" alt="CRM Integration" src="./images/aoe_icons_crm_2.svg"> 
                  <span class="service-title">CRM Integration</span> 
                </a> 
              </li> 
              <li class="three"> 
                <a title="Identity" href="#"> 
 
                  <img class="make-white" src="./images/aoe_icons_technologies_IRM.svg"> 
                  <span class="service-title">Identity &amp; Access Mngmt</span> 
                </a> 
              </li> 
              <li class="one"> 
                <a title="Search" href="#"> 
 
                  <img class="make-white" alt="Search" src="./images/Search2.svg"> 
                  <span class="service-title">Search</span> 
                </a> 
              </li> 
              <li class="two"> 
                <a title="E-Commerce" href="#"> 
 
                  <img class="make-white" alt="E-Commerce" src="./images/aoe_icons_services_order_management.svg"> 
                  <span class="service-title">E-Commerce</span> 
                </a> 
              </li> 
              <li class="three"> 
                <a title="Mobile Apps" href="#"> 
 
                  <img class="make-white" alt="Mobile Apps" src="./images/aoe_icons_web_and_mobile_applications.svg"> 
                  <span class="service-title">Mobile Apps</span> 
                </a> 
              </li> 
              <li class="one"> 
                <a title="PIM Systems" href="#"> 
 
                  <img class="make-white" alt="PIM Systems" src="./images/aoe_icons_technologies-13.svg"> 
                  <span class="service-title">PIM Systems</span> 
                </a> 
              </li> 
            </ul> 
            <p class="text-center mt-5"><a class="btn btn-custom">View All</a></p> 
          </li> 
 
        </ul> 
      </li> 
    </ul> 
  </div> 
</nav> 
 
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

READ ALSO
Keeping main thread running with Thread.sleep vs CountDownLatch

Keeping main thread running with Thread.sleep vs CountDownLatch

I want my main thread to be running, as I have some listener that will be listening to request/messages in another thread and I don't want my main thread to die

51
Java: short min value -&gt; Incompatible types: Required: short, Found: int

Java: short min value -> Incompatible types: Required: short, Found: int

I want to assign minimal value to short by using bit notation:

16
Thread.sleep() in Multi-threading

Thread.sleep() in Multi-threading

I have question regarding Threadsleep() in the use of multi-threading

33