我正在制作一个带有下拉菜单的网站,为此我正在使用 ul。 我有一个包含这个 ul 的 div。但是,文本没有显示在 div 中;它在它下面。
________________
|________________| //This is the div
Categories //This is the text of the ul inside the div.
我的 HTML:
<div class="nav">
<ul class="dropdown">
<li id="top"><a href="index.html">Categories</a>
<span></span>
<ul class="dropdown-box">
<li><a href="#">LI1</a></li>
<li><a href="#">LI2</a></li>
<li><a href="#">LI3</a></li>
</ul>
</li>
</ul>
</div>
我的 CSS:
.nav{
float:right;
margin-right: 5%;
height: 30px;
margin-top: 2px;
border: 1px solid black;
}
#top a{
text-decoration: none;
color: #ffffff;
font-family: 'Times New Roman', Times, serif;
font-size: 25px;
}
ul li{
list-style:none;
}
.dropdown{
margin: 0 auto;
text-align:center;
}
.dropdown li .dropdown-box{
background-color: #f0f0f0;
overflow: hidden;
display:none;
height:0;
padding:0;
width: 100%;
}
.dropdown li .dropdown a{
color: #000000;
font-size: 20px;
}
.dropdown li:hover .dropdown-box, .dropdown li:active .dropdown-box {
display:block;
height: auto;
background-color: #f0f0f0;
animation: box 2s ease;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
我做错了什么?
你可以看到 fiddle here .
最佳答案
header font-size 使其低于 div。从标题类中删除 font-size: 56px,并将 font-size: 56px 添加到#site_header
CSS:
.header{
background-color: #31c68b;
font-family: 'Luckiest Guy', cursive;
width: 100%;
height: 65px;
/* font-size: 56px; */
}
#site_header{
margin-left: 5%;
height: 56px;
margin-top: auto;
margin-bottom:auto;
width:30%;
float:left;
color: #ffffff;
font-size: 56px;
}
关于html - 文本从 div 溢出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29060717/