Search code examples
htmlcssbackgroundinvisible

CSS Not showing background (overflow:auto not helping)


The background and border of #navigation_conatiner_7 are not visible. I tried adding overflow:auto to its parent, and it just displays scroll bars. Later I tried adding the same to it, but then it is completely hidden. Since I have run out of ideas, I thought maybe someone here might have the answer.

Here is the code: http://jsfiddle.net/Tamaki/my5GV/

HTML:

<div id="navigation">
    <div id="holder">
        <div id="navigation_category_2">articles</div>
        <div id="navigation_category_3">columns</div>
        <div id="navigation_category_7">submit
            <div id="navigation_container_7">
                <div class="navigation_link"><span style="margin-left: 10px;">submit</span></div>
                <div class="navigation_link"><span style="margin-left: 10px;">applications</span></div>
                <div class="navigation_link"><span style="margin-left: 10px;">points</span></div>
            </div>
        </div>
    </div>
</div>

CSS:

#navigation {
    top: 0px !important;
    width: 100%;
    height: 60px;
    background-color: #eee;
    border-bottom: solid 3px #dd6a0c;
    position: fixed;
}

#holder {
    width: 960px;
    margin: 0 auto;
    height: inherit;
}

/* Navigation
============================*/

#navigation_category_2, #navigation_category_3, #navigation_category_7 {
    height: 60px;
    float: left;
    width: 120px;
    text-align: center;
    margin: 0 7px 0 8px;
    cursor: pointer;
    line-height: 60px;
    font-family: Impact, Arial, sans-serif;
    color: #111;
    font-size: 18px;
}

#navigation_category_2:hover, #navigation_category_3:hover, #navigation_category_7:hover {
    background-color: #dd6a0c;
    color: #eee;
}

#navigation_category_7:hover {
    background-color: #eee;
    color: #111;
}

#navigation_container_7 {
    top: 0;
    position: relative;
    display: none;
    width: 160px;
    left: -24px;
    border: 3px solid #dd6a0c;
    border-top: none;
    height: 0px;
    background-color: #eee;
}

#navigation_category_7:hover #navigation_container_7 {
    display: block;
}

.navigation_link {
    top: 0;
    width: inherit;
    height: 26px;
    text-align: left;
    font-size: 11px;
    font-family: Verdana;
    color: #111;
    line-height: 26px;
    text-transform: capitalize;
    font-weight: bold;
}

.navigation_link:hover {
    background-color: #dd6a0c;
    color: #eee;
}

Solution

  • remove height=0px from #navigation_conatiner_7