ナビゲーションバーのcss/html

Question

のナビゲーションバーのドロップダウンメニューのサイズを65pxまで高めようとしていますが、元々はulとliタグを使用していました

<div id="nav"> 
<div class="container"> 
<a href="404.html">404found</a> 
<div class="dropdown"> 
<button class="dropbtn">Courses</button> 
<div class="dropdown-content"> 
<a href="nonadvancedcourses.html">Non-Advanced</a> 
<a href="advancedcourses.html">Advanced</a> 
</div> 
</div> 
<a href="projects.html">Projects</a> 
<a href="contact.html">Contact</a> 
</div> 
</div> 



.dropdown { 
float:left; 
overflow:hidden; 
height:65px; 
width:205px; 
} 

.dropdown .dropbtn { 
font-size:16px;  
border:none; 
outline:none; 
background-color:#FFF; 
width:205px; 
height:65px; 
font-family:"Calibri Light", Arial, Helvetica, sans-serif; 
font-weight:100; 
color:#444; 
background:#FFF; 
} 

.container a:hover, .dropdown:hover .dropbtn { 
background:#E9E9E9; 
} 

.dropdown-content { 
display:none; 
position:absolute; 
background-color:#f9f9f9; 
width:205px; 
height:65px; 
box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2); 
z-index:1; 
} 

.dropdown-content a { 
float:left; 
font-size:16px; 
background:#FFF; 
text-align:center; 
padding:0; 
margin:0; 
text-decoration:none; 
width:205px; 
height:65px; 
font-family:"Calibri Light", Arial, Helvetica, sans-serif; 
font-weight:100; 
color:#444; 
line-height:23px; 

} 

.dropdown-content a:hover { 
background-color:#E9E9E9; 
} 

.dropdown:hover .dropdown-content { 
display:block; 
} 

.container { 
overflow:hidden; 
background-color:#FFF; 
font-family:Arial; 
height:65px; 
} 

.container a { 
float:left; 
font-size:16px; 
background:#FFF; 
text-align:center; 
padding-top:23px; 
text-decoration:none; 
width:205px; 
height:65px; 
font-family:"Calibri Light", Arial, Helvetica, sans-serif; 
font-weight:100; 
color:#444; 
} 

Answer 1

は、ここで問題がある：W3バリデータは、それが正確に正しい波平と言ったので、私はdiv要素にそれをすべて変更しなければならなかったナビゲーションバーが、私はここに私のhtmlソースコードで、div要素にそれをすべて変更しなければなりませんでしたコンテンツがあなたが設定している高さをオーバーフローしている場合、ここでこれを解決する方法があります。

注：私は、彼らが

物事を小さくしてください.dropdown-content a

に何かを上書きしないように、最も簡単な方法があふれているものサイズを変更することで、スタイルのトップに.container aルールを移動しました。この場合、次のスタイルを簡単に適用できます。

.dropdown-content a { 
    padding-top: 4px; 
    height: 28.5px; 
} 

codepen

しかし、私自身の提案を希望ので、これは、それを行うための良い方法ではなく、正しく物事を中心にいじるの多くを必要とします...

は、私が何を整列させるために非常に有用フレックス見つけるそれに

を曲げること。 .dropdown-content aにパディングと高さのセットを削除すると、65pxの高さ内に完全にフィットするテキストと中央揃えのテキストを適用/置換できます。 Read more about flex here.

.dropdown-content { 
    flex-direction: column; 
} 

.dropdown-content a { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 

.dropdown:hover .dropdown-content { 
    display: flex; 
} 

この方法では、多くの動的で、.dropdown-contentの高さは、それに応じてフィットするように、すべてが調整することができます。

codepen