サブメニューとメインメニューを一致させる

Question

私のsub-menuとsub-sub-menuは、互いに大きなギャップを持っているように見え、メインメニューと揃っていません。 sub-menuをメインメニューから直接ドロップし、をホバーオーバーしたときにsub-menuの右側に表示します。どうやってやるの？以下

は私のコードです：

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

 
    
 

 

ありがとうございました。

Answer 1

.sub-menuと.sub-sub-menuにはposition: absoluteがあります。 topとleftのプロパティを使用してコンテナブロックを整列させるだけです。

solidはborder-type属性であり、font-sizeでは必須ではないため、font-size: 14px solidは無効です。単にfont-size: 14pxに変更してください。これは、あなたが始めるのに役立つだろう

.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

：

はコードを参照してください。

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