邊欄超鏈接沒有被高度CSS

Question

CSS

.nested-menu { 
     .list-group-item { 
      cursor: pointer; 
     } 
     .nested { 
      list-style-type: none; 
     } 
     ul.submenu { 
      height: 0; 
     } 
     & .expand { 
      ul.submenu { 
       list-style-type: none; 
       height: auto; 
       li { 
        a { 
         color: #FFF; 
         padding: 10px; 
         display: block; 
        } 
       } 
      } 
     } 
    } 

HTML

<div class="nested-menu"> 
       <a class="list-group-item" (click)="addExpandClass('pages')"> 
        <span> 
         <i class="fa fa-universal-access"></i> 
         &nbsp;Account 
        </span> 
       </a> 
       <div class="nested" [class.expand]="showMenu === 'pages'"> 
        <ul class="submenu"> 
         <li> 
          <a [routerLink]="['account/password']" (click)="eventCalled()"> 
           <span>Password reset</span> 
          </a> 
         </li> 
         <li> 
          <a [routerLink]="['account/user']" (click)="eventCalled()"> 
           <span>User</span> 
          </a> 
         </li> 
        </ul> 
       </div> 
      </div> 

點擊它看起來像在此之前是隱藏的。 height: 0不隱藏子鏈接。如何隱藏它們？

Answer 1

您需要添加溢出：隱藏;到你的子菜單類。

ul.submenu { 
    height: 0; 
    overflow: hidden; 
} 

Answer 2

你不能爲內聯元素的高度。您必須將其轉換爲block元素或inline-block元素才能做到這一點。

套裝display: inline-block;或display: block;