Pure CSS navbar :Hover on List not staying

Question

I'm sure this is a common problem with pure css navbar. I have a navbar created with ul and li's but I can't get the menus to stay up when I hover. I know that the problem is that the menu is opening ONLY when I'm hovering over the link but I'm not sure how to get it work. I tried jQuery mouseover but it wasn't working for me:

 @font-face{ font-family: Bebas; src:url(BEBAS.TTF); } body{ margin:0 auto; height:500px; font-family: Bebas; } .header{ top:0; position:absolute; left:0; right:0; background:#ff6200; height:50px; width:100%; color:white; font-family: Bebas; } .header .call{ line-height:50px; } .call{ width:60%; margin:0 auto; } .login{ float:right; } .callme, .loginme{ color:#AF2626; } .signup{ margin-left:10px; } .number{ margin-left:10px; } .navbar{ margin-top:50px; right:0; left:0; position:relative; height:130px; width:100%; background:#F7F7F7; border-radius:0px; padding:0px; } .inside-navbar{ line-height:130px; width:60%; margin:0 auto; font-size:40px; } .logo{ color:#FF6200; } #navsman{ font-size:16px; float:right; display:inline-block; min-width:300px; position:absolute; padding-right: 20%; } #navsman li{ display:inline; position:relative; padding-left:15px; line-height:1.4; } #navsman li ul{ position:absolute; display:none; } #navsman li:hover > ul.firstmenu{ display:block !important; margin-top: -50px; } #navsman li ul li{ position:relative; padding-left:15px; } #navsman ul.secondmenu{ margin-left: 40px; padding-top:15px; padding-top: 30px; z-index: 2; width: 120px; display:none; } #navsman > li:hover > ul { left: auto; padding-top: 5px ; min-width: 100%; } #navsman ul.firstmenu li:hover ul.secondmenu{ display:block !important; margin-top: -50px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet"/> <div class="headwrapper"> <div class="header"> <div class="call"><span class="callme">CALL US NOW!</span> <span class="number">777.77.7777.777</span> <span class="login"><span class="loginme">LOGIN </span><span class="signup">SIGNUP</span></span> </div> </div> <div class="navbar"> <div class="inside-navbar"> <span>YOUR<span class="logo">LOGO</span></span> <ul id="navsman"> <li><a href="">Title1</a></li> <li class="title2"><a href="">Title2</a> <ul class="firstmenu"> <li><a href="#">SUBMENU1</a></li> <li><a href="#">SUBMENU2</a></li> <li><a href="#">SUBMENU3</a> <ul class="secondmenu"> <li class="secondli-first"><a href="#">Sub link 1</a></li> <li class="secondli-second"><a href="#">Sub link 1</a></li> </ul> </li> </ul> <li><a href="">Title3</a></li> <li><a href="">Title4</a></li> <li><a href="">Title5</a></li> <li><a href="">Title6</a></li> <li><a href="">Title7</a></li> </div> </ul> </div> </div><!--Navbar end--> </div> 

Answer 1

Replace:

#navsman > li:hover > ul {
  left: auto;
  padding-top: 5px  ;
  min-width: 100%;
}

With:

#navsman > li:hover > ul li {
  left: auto;
  padding-top: 5px  ;
  min-width: 100%;
  height: 10px;
  margin-top:-15px;
  padding-left: 10px;
}

Answer 2

Close the gap mentioned by @James Montagne

navsman li ul{

position:absolute;
display:none;
top:70px; <-- new line of code
}