2017-04-16 10 views
0

ドロップダウンメニューを作成しようとしましたが、メインメニューボタンの下にドロップダウンメニューが表示されていましたが、表示されます。私は何を取りこぼしたか?ドロップダウンメニューを作成してメインメニューの下にサブメニューを表示

<body> 
<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="drop_down"> 
         <li> 
          <a href="#">Lorem ipsum</a> 
         </li> 
         <li> 
          <a href="#">Dolor sit amet </a>      
         </li> 
         <li> 
          <a href="#">Conse ctetur </a> 
           <ul class="dropdown-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> 
    </body> 

CSSコード:

.box-nav-bar ul{ 
    display:inline-block; 

    text-decoration: none; 
    padding-top: 20px; 


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

    text-align: center; 

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

} 

答えて

0

がそれを見つけた、ありがとうございました。私はdrop_downクラスにnoneを表示する必要がありました。

関連する問題