aligning sub menu with the main menu

Question

My sub-menu and sub-sub-menu seem to have a lot of gap from each other and is not aligned with the main menu. I want the sub-menu to drop down straight from the main menu and sub-sub-menu to open up on the right side of the sub-menu when hovered over. How can I do that?

below are my codes:

   .nav-bar {
    	max-height: 0;
    	margin-left: 0;
    	padding-left:20px;
    	padding-top: 200px;
    }
    
    .box-nav-bar ul{
    	display:inline-block;
    	
    	text-decoration: none;
    	padding: 0;
    	list-style-type: none;
    	margin:0;
    }
    
    .box-nav-bar ul li{
    	display: inline-block;
    	padding: 20px;
    	border: 1px solid grey;
    	width: 100px;
    	height: 50px;
    	line-height: 50px;
    	
    	text-align: center;
    	position: relative;
    	
    }
    .box-nav-bar ul li a{
    	text-decoration: none;
    	list-style: none;
    	color: black;
    	font-size: 18px;
    	font-weight: bold;
    	font-family: Arial;
    	display:block;
    	
    }
    .box-nav-bar ul li:hover{
    	background-color: grey;
    	
    }
    
    .box-nav-bar ul .sub-menu ul li{
    	text-decoration: none;
    	padding: 0;
    	margin: 0;
    	list-style-type: none;
    	width: 150px;
    	
    	
    }
    .box-nav-bar ul .sub-menu {
    	display: none;
    	font-size: 14px solid;
    	position:absolute;
    	text-align: center;	
    }
    .box-nav-bar li:hover .sub-menu{
    	display: block;
    	
    }
    .sub-sub-menu{
    	display: none;
    	font-size: 14px solid;
    	position:absolute;
    	text-align: center;
    }
    
    .box-nav-bar li:hover .sub-menu li:hover{
    	display: block;
    	
    }

 <div class="nav-bar">
    		<nav class="box-nav-bar">
    			<ul>
    				<li> <a href="/Home">HOME</a></li>
    				<li> <a href="/Home">ABOUT</a></li>
    				<li> <a href="/Home">SERVICES</a>
    					<ul class="sub-menu">
    				        <li>
    							<a href="#">Lorem ipsum</a>
    						</li>
    						<li>
    							<a href="#">Dolor sit amet  </a>                      
    						</li>
    						<li>
    							<a href="#">Conse ctetur </a>
    								<ul class="sub-sub-menu">
    									<li>
    										<a href="#">Latest</a>
    									</li>
    									<li>
    										<a href="#">Archive</a>
    									</li>                      
    								</ul>
    						</li>
    					</ul>
    				</li>
    				<li> <a href="/Home">PROJECTS</a></li>
    				<li> <a href="/Home">CONTACTS</a></li>
    			</ul>
    		</nav>
    </div>

 

 

Thank you.

Answer 1

This will help you get started.

.nav-bar {
  max-height: 0;
  margin-left: 0;
  padding-left: 20px;
  padding-top: 200px;
}

.box-nav-bar ul {
  display: inline-block;
  text-decoration: none;
  padding: 0;
  list-style-type: none;
  margin: 0;
}

.box-nav-bar ul li {
  display: inline-block;
  padding: 20px;
  border: 1px solid grey;
  width: 100px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  position: relative;
}

.box-nav-bar ul li a {
  text-decoration: none;
  list-style: none;
  color: black;
  font-size: 18px;
  font-weight: bold;
  font-family: Arial;
  display: block;
}

.box-nav-bar ul li:hover {
  background-color: grey;
}

.box-nav-bar ul .sub-menu ul li {
  text-decoration: none;
  padding: 0;
  margin: 0;
  list-style-type: none;
  width: 150px;
}

.box-nav-bar ul .sub-menu {
  display: none;
  font-size: 14px solid;
  position: absolute;
  text-align: center;
  left: 0;
  top: 100%;
}

.box-nav-bar li:hover .sub-menu {
  display: block;
}

.sub-menu li {
  width: 100% !Important;
}

.sub-menu li:hover .sub-sub-menu {
  display: block !important;
}

.sub-sub-menu {
  display: none !important;
  font-size: 14px solid;
  position: absolute;
  text-align: center;
  top: -2px;
  left: 100%;
}

.box-nav-bar li:hover .sub-menu li:hover {
  display: block;
}

.sub-sub-menu li {
  width: 100% !important;
  display: block !important;
  padding: 20px !important;
}

<div class="nav-bar">
  <nav class="box-nav-bar">
    <ul>
      <li> <a href="/Home">HOME</a></li>
      <li> <a href="/Home">ABOUT</a></li>
      <li> <a href="/Home">SERVICES</a>
        <ul class="sub-menu">
          <li>
            <a href="#">Lorem ipsum</a>
          </li>
          <li>
            <a href="#">Dolor sit amet  </a>
          </li>
          <li>
            <a href="#">Conse ctetur </a>
            <ul class="sub-sub-menu">
              <li>
                <a href="#">Latest</a>
              </li>
              <li>
                <a href="#">Archive</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li> <a href="/Home">PROJECTS</a></li>
      <li> <a href="/Home">CONTACTS</a></li>
    </ul>
  </nav>
</div>

Answer 2

You have position: absolute on your .sub-menu and .sub-sub-menu. You just have to align your container blocks using the top and left properties.

Also font-size: 14px solid is invalid as solid is a border-type attribute and not required with font-size. Change it simply to font-size: 14px.

Refer code:

.nav-bar {
  max-height: 0;
  margin-left: 0;
  padding-left: 20px;
  padding-top: 200px;
}

.box-nav-bar ul {
  display: inline-block;
  text-decoration: none;
  padding: 0;
  list-style-type: none;
  margin: 0;
}

.box-nav-bar ul li {
  display: inline-block;
  padding: 20px;
  border: 1px solid grey;
  width: 100px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  position: relative;
}

.box-nav-bar ul li a {
  text-decoration: none;
  list-style: none;
  color: black;
  font-size: 18px;
  font-weight: bold;
  font-family: Arial;
  display: block;
}

.box-nav-bar ul li:hover {
  background-color: grey;
}

.box-nav-bar ul .sub-menu ul li {
  text-decoration: none;
  padding: 0;
  margin: 0;
  list-style-type: none;
  width: 150px;
}

.box-nav-bar ul .sub-menu {
  display: none;
  font-size: 14px;
  position: absolute;
  text-align: center;
  top: 91px;
  left: 0;
}

.box-nav-bar li:hover .sub-menu {
  display: block;
}

.sub-sub-menu {
  display: none;
  font-size: 14px;
  position: absolute;
  text-align: center;
  top: 0px;
  left: 140px;
}

.box-nav-bar li:hover .sub-menu li:hover {
  display: block;
}

<div class="nav-bar">
  <nav class="box-nav-bar">
    <ul>
      <li> <a href="/Home">HOME</a></li>
      <li> <a href="/Home">ABOUT</a></li>
      <li> <a href="/Home">SERVICES</a>
        <ul class="sub-menu">
          <li>
            <a href="#">Lorem</a>
          </li>
          <li>
            <a href="#">Dolor </a>
          </li>
          <li>
            <a href="#">Conse </a>
            <ul class="sub-sub-menu">
              <li>
                <a href="#">Latest</a>
              </li>
              <li>
                <a href="#">Archive</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li> <a href="/Home">PROJECTS</a></li>
      <li> <a href="/Home">CONTACTS</a></li>
    </ul>
  </nav>
</div>