リンク上にカーソルを置いたときに高さを固定する方法

Question

これは私の実際のコードではありません。私はドロップダウンメニューを作成していますが、私はすべてのコードを削除したので、私は私の質問のための最小限のコードを持つことができる1つの問題があった。

私の問題は、自分のリンク上に置いたとき、アンカータグのフォントサイズを増やしていますが、それは理解できる、li要素の高さも増やしています。要するに私はそれが起こっている理由を知っている、 私はただ解決策が欲しい。私の上にカーソルを置くとフォントサイズは大きくなりたいが、親要素であるli要素のサイズではない。問題を理解できない場合は、CSSコードのコメントを読んでください。

私が唯一の解決策

/*basic style no need to pay attention*/ 
 

 
* { 
 
    font-family: helvetica; 
 
    margin: 0px; 
 
    padding: 0; 
 
    list-style-type: none; 
 
} 
 

 
.menu { 
 
    display: flex; 
 
} 
 

 
.menu li { 
 
    flex: 1; 
 
} 
 

 
ul ul li { 
 
    display: flex; 
 
} 
 

 
.menu>li a { 
 
    background: black; 
 
} 
 

 
a { 
 
    display: block; 
 
    width: 100%; 
 
} 
 

 

 
/* 
 
    #### 
 
    increase the font size, but not the size for li 
 
    ####*/ 
 

 
a:hover { 
 
    font-size: 26px; 
 
}

<ul class="menu"> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#">About</a></li> 
 
    <li class="menu-item-has-children"><a href="#">Services</a> 
 
    <ul class="sub-menu"> 
 
     <li><a href="#">Plumbing</a></li> 
 
     <li class="menu-item-has-children"><a href="#">Heating</a> 
 
     <ul class="sub-menu sub-menu2"> 
 
      <li><a href="#">Residential</a></li> 
 
      <li><a href="#">Commercial</a></li> 
 
      <li><a href="#">Industrial</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Electrical</a></li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#">Pricing</a></li> 
 
    <li><a href="#">Contact Us</a></li> 
 
</ul>

Answer 1

のCSSを使用したいli高さは、あなたのテキストのサイズを持つためにあなたのデフォルトline-height変更を変更しています。 li要素にline-heightを定義し、同じ高さになるようにしてください。

Answer 2

/*basic style no need to pay attention*/ 
 

 
* { 
 
    font-family: helvetica; 
 
    margin: 0px; 
 
    padding: 0; 
 
    list-style-type: none; 
 
} 
 

 
.menu { 
 
    display: flex; 
 
} 
 

 
.menu li { 
 
    flex: 1; 
 
} 
 

 
ul ul li { 
 
    display: flex; 
 
} 
 

 
.menu>li a { 
 
    background: black; 
 
    min-height: 36px; 
 
} 
 

 
a { 
 
    display: block; 
 
    width: 100%; 
 
} 
 

 

 
/* 
 
    #### 
 
    increase the font size, but not the size for li 
 
    ####*/ 
 

 
a:hover { 
 
    font-size: 26px; 
 
}

<ul class="menu"> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#">About</a></li> 
 
    <li class="menu-item-has-children"><a href="#">Services</a> 
 
    <ul class="sub-menu"> 
 
     <li><a href="#">Plumbing</a></li> 
 
     <li class="menu-item-has-children"><a href="#">Heating</a> 
 
     <ul class="sub-menu sub-menu2"> 
 
      <li><a href="#">Residential</a></li> 
 
      <li><a href="#">Commercial</a></li> 
 
      <li><a href="#">Industrial</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Electrical</a></li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#">Pricing</a></li> 
 
    <li><a href="#">Contact Us</a></li> 
 
</ul>

は最小高さを追加する "" タグ

.menu>のLi A {背景：黒なし繰り返しスクロール0 0。最小高さ：36px; }