[英]Text overflowing from div
我正在使用下拉菜單創建一個網站,為此我正在使用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;
}
我究竟做錯了什么?
您可以在這里看到小提琴。
標頭的字體大小使其低於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;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.