我不能调整导航栏中的下拉菜单css/html

即时尝试调整我的导航栏中的下拉菜单的大小为65px高，但它不会改变，无论我放入什么高度，原来我曾使用ul和li标记为我导航栏，但我不得不给它的所有更改为div的，因为W3验证说，它不是完全正确的，所以我不得不给它的所有更改为div的，这里是我的html和源代码：我不能调整导航栏中的下拉菜单css/html

<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; 
}

来源

2017-05-12 Noah Boon

的'.dropdown-content'是65px的高度，但它的内容满溢。你可以在'.dropdown-content'上使用'overflow：hidden;'，但是这会隐藏高级选项（你必须修改'.dropdown-content a'来排序） –

谢谢，那有效，准确地做到让高级选项显示出来？ –

最简单的方法是改变'.dropdown-content a'的高度和填充顶部。如果你这样做，你可能不需要'.dropdown-content'上的'overflow：hidden;'，因为你不需要隐藏任何东西 –

这里的问题是内容溢出你正在设置的高度，这里有一些解决这个问题的方法。

注：我搬到.container a规则的风格的顶部，这样他们就不会在.dropdown-content a

覆盖任何东西让事情变得更小

最简单的方法是调整什么是满溢。在这种情况下，下面的样式可以简单地适用于：

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

codepen

但是，这是没有这样做的一个很好的方法，并涉及摆弄正确中心的东西很多，所以我自己的建议会是...

弯曲它

我找到对准任何弹性非常有用的。删除在.dropdown-content a上设置的填充和高度，您可以应用/替换以下样式，以便在65像素高度内完美拟合并居中显示文本。 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

来源

2017-05-12 17:40:00

我不能调整导航栏中的下拉菜单css/html

回答

相关问题