Ausrichten Untermenü mit dem Hauptmenü

Question

Meine sub-menu und sub-sub-menu scheinen viel Abstand voneinander zu haben und ist nicht mit dem Hauptmenü ausgerichtet. Ich möchte, dass die sub-menu direkt aus dem Hauptmenü und sub-sub-menu Dropdown auf der rechten Seite der sub-menu öffnen, wenn Sie über. Wie kann ich das machen?

unten sind meine Codes:

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

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

 
    
 

 

Danke.

Answer 1

Sie haben position: absolute auf Ihrem .sub-menu und .sub-sub-menu. Sie müssen nur Ihre Container-Blöcke mit den Eigenschaften top und left ausrichten.

Auch font-size: 14px solid ist ungültig, da solid ein border-type Attribut ist und nicht erforderlich ist mit font-size. Ändern Sie es einfach in font-size: 14px.

Siehe 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>

Answer 2

Dies wird Ihnen helfen loszulegen.

.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>