文字溢出 div

Question

我正在制作一个带有下拉菜单的网站，为此我正在使用 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.

Answer 1

header font-size 使其低于 div。去掉headerclass中的font-size:56px，在#site_header

中加入font-size:56px

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

文字溢出 div

Text overflowing from div

html

css

overflow